uniapp 如何实现上传视频功能

在uniapp中如何实现上传视频功能？需要选择本地视频文件并上传到服务器，希望能提供完整的代码示例和步骤说明。另外，需要注意哪些兼容性问题和大文件上传的处理方法？

2 回复

使用uni.chooseVideo选择视频，然后uni.uploadFile上传到服务器。记得配置manifest.json的权限和服务器地址。


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

1. 选择视频文件

使用 uni.chooseVideo API 选择本地视频文件，支持拍摄或从相册选择。

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

2. 上传视频到服务器

使用 uni.uploadFile API 将视频文件上传到服务器。

uni.uploadFile({
  url: 'https://your-server.com/upload', // 替换为你的上传接口
  filePath: this.videoPath, // 视频临时路径
  name: 'videoFile', // 文件对应的 key
  formData: {
    userId: '123' // 附加参数（可选）
  },
  success: (uploadRes) => {
    console.log('上传成功:', uploadRes.data);
    // 处理服务器返回的数据（如视频URL）
  },
  fail: (error) => {
    console.error('上传失败:', error);
  }
});

3. 服务器端处理

确保服务器端有接收文件上传的接口（如 PHP、Node.js 等），并处理文件保存和返回访问URL。

注意事项：

  • 格式和大小限制：通过 maxDuration 和 compressed 参数控制视频时长和压缩（部分平台支持）。
  • 临时路径：tempFilePath 仅在本次应用运行期间有效，需及时上传。
  • 权限配置：在 manifest.json 中确认相机和相册权限已开启（HBuilderX 中可视化配置）。

完整示例代码：

<template>
  <view>
    <button @tap="chooseVideo">选择视频</button>
    <button @tap="uploadVideo" v-if="videoPath">上传视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoPath: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.videoPath = res.tempFilePath;
        }
      });
    },
    uploadVideo() {
      if (!this.videoPath) return;
      uni.uploadFile({
        url: 'https://your-server.com/upload',
        filePath: this.videoPath,
        name: 'videoFile',
        success: (res) => {
          uni.showToast({ title: '上传成功' });
        }
      });
    }
  }
};
</script>

通过以上步骤，即可在 UniApp 中完成视频选择、上传功能。根据实际需求调整参数（如服务器地址、附加数据等）。

回到顶部