uni-app H5端视频上传BUG

在使用 uni-app 开发 H5 端应用时，视频上传可能会遇到一些常见问题或 BUG。以下是一些可能的原因和解决方案：

1. 视频文件过大导致上传失败

• 问题描述：H5 端上传视频时，如果文件过大，可能会导致上传失败或卡顿。
• 解决方案：
  • 限制上传文件大小，提示用户选择合适大小的视频。
  • 使用分片上传（chunked upload）技术，将大文件分割成多个小文件上传。
  • 压缩视频文件后再上传（可以使用第三方库或工具）。

2. H5 端无法获取视频文件信息

• 问题描述：在 H5 端，uni.chooseVideo 或 uni.chooseFile 获取的视频文件可能缺少某些信息（如文件大小、时长等）。

• 解决方案：

  • 使用 FileReader 或 URL.createObjectURL 获取文件信息。
  • 如果需要获取视频时长，可以使用 <video> 标签加载视频后，通过 duration 属性获取。

  const video = document.createElement('video');
  video.src = URL.createObjectURL(file);
  video.onloadedmetadata = () => {
    console.log('视频时长:', video.duration);
  };
  

3. H5 端上传接口不支持 FormData

• 问题描述：某些 H5 端的上传接口可能不支持 FormData，导致上传失败。

• 解决方案：

  • 确保后端接口支持 multipart/form-data 格式。
  • 如果后端不支持，可以将文件转换为 base64 或 Blob 格式上传。

  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const base64 = reader.result.split(',')[1];
    // 上传 base64 数据
  };
  reader.readAsDataURL(file);
  

4. H5 端上传进度无法监听

• 问题描述：在 H5 端，uni.uploadFile 的 progress 回调可能无法正常触发。

• 解决方案：

  • 使用原生 XMLHttpRequest 或 fetch 实现上传，并监听 progress 事件。

  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      console.log('上传进度:', percent);
    }
  };
  xhr.open('POST', '上传地址', true);
  xhr.send(formData);
  

5. H5 端跨域问题

• 问题描述：H5 端上传视频时，可能会遇到跨域问题（CORS）。

• 解决方案：

  • 确保后端服务器配置了正确的 CORS 头信息。
  • 如果是开发环境，可以使用代理解决跨域问题。

  // vue.config.js
  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://your-server.com',
          changeOrigin: true,
        },
      },
    },
  };
  

6. H5 端视频格式不支持

• 问题描述：某些浏览器或设备可能不支持特定的视频格式（如 .mov、.avi）。
• 解决方案：
  • 限制用户上传的视频格式（如 .mp4、.webm）。
  • 使用第三方库（如 ffmpeg.js）在客户端转换视频格式。

7. H5 端上传后无法播放

• 问题描述：上传后的视频无法播放，可能是由于文件损坏或编码问题。
• 解决方案：
  • 确保上传的视频文件完整且未损坏。
  • 使用 <video> 标签测试上传后的视频是否可以正常播放。

8. H5 端上传超时

• 问题描述：上传视频时，可能会因为网络问题导致超时。

• 解决方案：

  • 增加上传超时时间。
  • 使用分片上传或断点续传技术。

  uni.uploadFile({
    url: '上传地址',
    filePath: filePath,
    timeout: 60000, // 设置超时时间为 60 秒
    success: (res) => {
      console.log('上传成功', res);
    },
    fail: (err) => {
      console.log('上传失败', err);
    },
  });