微信小程序wx.uploadFile上传视频遇到的两个坑

最新推荐文章于 2025-06-16 10:53:39 发布

原创最新推荐文章于 2025-06-16 10:53:39 发布 · 8.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#wx.uploadFile #小程序

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在微信小程序中实现视频上传的过程，包括选择视频、上传到服务器，并处理了上传过程中的进度显示及常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var _this = this;
      wx.chooseVideo({
          sourceType: ['album', 'camera'],
          maxDuration: 60,
          camera: 'back',
          success(res) {
         
              const uploadTask = wx.uploadFile({
                  url: '', // 上传到服务器
                  filePath: res.tempFilePath,
                  name: 'file',
                  header: {
                      "Content-Type": "multipart/form-data"
                  },
                  formData: {
                      fileKey: fileKey
                  },
                  success(res) {
                      const data = JSON.parse(res.data);// 坑一：与wx.request不同，wx.uploadFile返回的是json字符串，需要自己转为JSON对象格式
                      console.log(data);
                      }
              });
              uploadTask.onProgressUpdate((res) => {
                  const uploadProgress = res.progress;
                  if(uploadProgress < 100){
                     // 坑2：wx.uploadFile本身有一个this，所以要通过外部var _this = this 把this带进来
                      _this.setData({
                          uploadPercent: uploadProgress
                      });
                  } else if(uploadProgress === 100){
                      _this.setData({
                          uploadPercent: 50
                      });
                  }
                  console.log('上传进度', res.progress);
                  console.log('已经上传的数据长度', res.totalBytesSent);
                  console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
              });
          }
      })