uni-app 视频选择与展示异常（针对app，h5正常）

uni-app 视频选择与展示异常（针对app，h5正常）

项目信息 详情
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 windows10
HBuilderX类型 正式
HBuilderX版本 3.1.11
手机系统 全部
手机系统版本 Android 11
手机厂商 OPPO
手机机型 mi 9
页面类型 vue
打包方式 离线
项目创建方式 HBuilderX

测试过的手机

小米9：MIUI 12.0.2

示例代码

<video :src="videoUrl"></video>
1、选择视频
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: function (res) {
that.videoUrl = res.tempFilePath;
}
});
1、上传视频
uni.uploadFile({
url: newUrl, // 后端api接口
filePath: this.videoUrl, // uni.chooseImage函数调用后获取的本地文件路劲
name: 'file', //后端通过'file'获取上传的文件对象
formData: {type:'3'},
success: res => {  
},
fail: function(err) {  
},
});

操作步骤

<video :src="videoUrl"></video>
1、选择视频
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: function (res) {
that.videoUrl = res.tempFilePath;
}
});
1、上传视频
uni.uploadFile({
url: newUrl, // 后端api接口
filePath: this.videoUrl, // uni.chooseImage函数调用后获取的本地文件路劲
name: 'file', //后端通过'file'获取上传的文件对象
formData: {type:'3'},
success: res => {  
},
fail: function(err) {  
},
});

预期结果

  1. 前端视频展示正常
  2. 后端文件接收正常

实际结果

  1. 前端视频展示异常
  2. 后端文件接收为null

bug描述

uni.chooseVideo 选择视频显示异常，感觉好像临时路径异常；文件上传后也获取不到


更多关于uni-app 视频选择与展示异常（针对app，h5正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 视频选择与展示异常（针对app，h5正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你描述的问题，uni-app在App端视频选择与展示异常，而H5正常，这通常与App端的临时文件路径处理有关。

问题分析：

  1. 临时路径问题：App端通过uni.chooseVideo获取的tempFilePath在某些Android设备上可能存在路径访问权限问题
  2. 文件格式兼容性：不同手机厂商录制的视频格式可能存在兼容性问题
  3. 路径生命周期：App端的临时文件路径可能在某些情况下被系统清理

解决方案：

  1. 路径验证与转换：
uni.chooseVideo({
  count: 1,
  sourceType: ['camera', 'album'],
  success: function (res) {
    // 在App端建议将临时路径转换为可访问的路径
    that.videoUrl = res.tempFilePath;
    
    // 验证文件是否存在
    plus.io.resolveLocalFileSystemURL(res.tempFilePath, function(entry) {
      console.log('文件存在:', entry.toLocalURL());
    }, function(e) {
      console.log('文件访问异常:', e.message);
    });
  }
});
  1. 使用绝对路径：
// 在App端可以尝试使用绝对路径
if(plus.os.name === 'Android') {
  that.videoUrl = '/storage/emulated/0/' + res.tempFilePath;
}
  1. 上传前文件验证：
uni.uploadFile({
  url: newUrl,
  filePath: this.videoUrl,
  name: 'file',
  formData: {type: '3'},
  success: res => {
    console.log('上传成功:', res);
  },
  fail: function(err) {
    console.log('上传失败:', err);
    // 检查文件路径是否有效
    plus.io.resolveLocalFileSystemURL(this.videoUrl, function(entry) {
      console.log('上传前文件验证成功');
    });
  }
});
  1. 考虑使用uni.saveFile：
// 将临时文件保存为持久文件
uni.saveFile({
  tempFilePath: res.tempFilePath,
  success: function(savedRes) {
    that.videoUrl = savedRes.savedFilePath;
  }
});
回到顶部