uniapp如何实现一次性上传多个视频

在uniapp中，我想实现一次性上传多个视频文件，但不知道具体该怎么做。请问应该如何选择文件并批量上传？是否需要使用特定的组件或插件？上传过程中如何显示进度？有没有完整的代码示例可以参考？

2 回复

使用uni.uploadFile，在循环中调用上传接口，每次传一个视频。注意：H5端可多选，但小程序需逐个上传。


在 UniApp 中，可以通过以下步骤实现一次性上传多个视频：

1. 选择多个视频文件

使用 uni.chooseMedia API 选择多个视频，通过设置 count 参数控制最大可选数量。

uni.chooseMedia({
  count: 5, // 最多选择5个视频
  mediaType: ['video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success: (res) => {
    const tempFiles = res.tempFiles; // 获取选中的视频临时文件数组
    this.uploadVideos(tempFiles);
  }
});

2. 逐个上传视频

遍历选中的视频文件，使用 uni.uploadFile 逐个上传到服务器。

uploadVideos(files) {
  const uploadTasks = files.map(file => {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: 'https://your-server.com/upload', // 替换为你的上传接口
        filePath: file.tempFilePath,
        name: 'video', // 文件对应的参数名
        formData: {
          'user': 'test'
        },
        success: (uploadRes) => {
          console.log('上传成功', uploadRes);
          resolve(uploadRes);
        },
        fail: (err) => {
          console.error('上传失败', err);
          reject(err);
        }
      });
    });
  });

  // 等待所有上传任务完成
  Promise.all(uploadTasks)
    .then(results => {
      uni.showToast({ title: '所有视频上传成功', icon: 'success' });
    })
    .catch(error => {
      uni.showToast({ title: '部分视频上传失败', icon: 'none' });
    });
}

注意事项：

  • 临时路径有效期：tempFilePath 在应用关闭后可能失效，建议尽快上传。
  • 服务器限制：确保服务器支持多文件上传及大小限制。
  • 用户体验：可添加进度条显示上传状态（需自行实现进度监听）。

完整示例代码：

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

<script>
export default {
  methods: {
    chooseVideos() {
      uni.chooseMedia({
        count: 5,
        mediaType: ['video'],
        success: (res) => {
          this.uploadVideos(res.tempFiles);
        }
      });
    },
    uploadVideos(files) {
      const uploadTasks = files.map(file => {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: 'https://your-server.com/upload',
            filePath: file.tempFilePath,
            name: 'video',
            success: resolve,
            fail: reject
          });
        });
      });
      
      Promise.all(uploadTasks)
        .then(() => uni.showToast({ title: '上传成功' }))
        .catch(() => uni.showToast({ title: '上传失败', icon: 'none' }));
    }
  }
}
</script>

通过以上方法，即可在 UniApp 中实现一次性选择并上传多个视频文件。

回到顶部