uniapp上传视频如何实现

在uniapp中上传视频的具体步骤是什么？需要用到哪些API或插件？能否提供一个完整的代码示例？上传过程中如何监听进度和处理错误？有没有文件大小或格式的限制需要注意？

2 回复

使用uni.chooseVideo选择视频，然后通过uni.uploadFile上传到服务器。记得配置manifest.json中的权限，并处理不同平台的兼容性问题。


在UniApp中实现视频上传，可以通过以下步骤完成：

1. 选择视频文件

使用 uni.chooseVideo 方法选择本地视频：

uni.chooseVideo({
  sourceType: ['camera', 'album'], // 来源：相机或相册
  maxDuration: 60, // 最大时长（秒）
  success: (res) => {
    console.log('视频临时路径:', res.tempFilePath);
    this.uploadVideo(res.tempFilePath); // 调用上传方法
  },
  fail: (err) => {
    uni.showToast({ title: '选择视频失败', icon: 'none' });
  }
});

2. 上传视频到服务器

通过 uni.uploadFile 将视频上传至服务端：

uploadVideo(filePath) {
  uni.uploadFile({
    url: 'https://your-server.com/upload', // 替换为你的上传接口
    filePath: filePath,
    name: 'video', // 后端接收的文件字段名
    formData: { 
      userId: '123' // 附加参数（可选）
    },
    success: (res) => {
      const data = JSON.parse(res.data);
      uni.showToast({ title: '上传成功' });
    },
    fail: (err) => {
      uni.showToast({ title: '上传失败', icon: 'none' });
    }
  });
}

3. 服务端注意事项

  • 后端需支持 multipart/form-data 格式接收文件。
  • 注意处理文件大小限制（可在服务端配置）。
  • 返回标准JSON响应（如 {code: 200, data: {url: '...'}}）。

4. 扩展功能（可选）

  • 进度监听：使用 onProgressUpdate 监听上传进度。
  • 格式验证：通过 tempFilePath 后缀名校验格式（如 .mp4）。
  • 压缩处理：可通过插件（如 uni-compress）压缩视频后再上传。

示例完整代码

<template>
  <view>
    <button @click="chooseVideo">选择并上传视频</button>
  </view>
</template>

<script>
export default {
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album'],
        success: (res) => {
          this.uploadVideo(res.tempFilePath);
        }
      });
    },
    uploadVideo(filePath) {
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath,
        name: 'video',
        success: (res) => {
          uni.showToast({ title: '上传完成' });
        }
      });
    }
  }
}
</script>

注意事项

  • 平台差异：H5端可能需单独处理自动播放策略。
  • 文件大小：建议在上传前通过 uni.getFileInfo 获取文件大小并提示用户。
  • 安全限制：确保服务器配置正确的CORS策略（针对H5）。

按照以上步骤即可快速实现UniApp视频上传功能。

回到顶部