这里是文章模块栏目内容页
wx.chooseVideo和wx.uploadFile微信API实现上传视频

小程序实现上传用户手机相册的视频文件或者调用相机拍摄视频上传,都可以通过wx.chooseVideo 这API完成。

/**上传视频 */
  bindButtonTapVideo: function (e) {
    var self = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 10,
      camera: 'back',
      success: function (res) {
        self.setData({
          video_src: res.tempFilePath
        })

        self.uploadVideo(res.tempFilePath);
        /** */
      }
    })
  },


sourceType参数设置视频来源 album相册,camera相机拍摄,设置两个表示供用户选择。一般设置两个。

maxDuration 视频的时长。超过10秒的不能选择或者上传。此参数最大60秒。

tempFilePath 是 视频在手机本地地址,用此地址直接显示在前端,用来实现视频的预览效果。

success 是选择视频或者拍摄视频后成功后的回调函数执行部分,把上传逻辑写在这里;


self.uploadVideo是自定义函数,实现上传部分的功能:

//上传视频到后台
  uploadVideo: function (videopath) {
    var self = this;
    /**调用接口上传 */
    let uploadUrl = app.util.url('entry/wxapp/TransVideo', { m: 'kbwdl_piaopiaozu' });

    const uploadTask = wx.uploadFile({
      url: uploadUrl,
      filePath: videopath,
      name: 'upfile',
      formData: {},
      success: function (resp) {
        let url = resp.data;
        let path = url.split('#');
        self.setData({
          form_video_paths: path[0]
        });

      },
      fail: function (res) {

        console.log('fail: lost!');
      },
      complete: function () {
        console.log('执行完毕 complete');
      }
    });
    /** */
    uploadTask.onProgressUpdate((res) => {
      if (res.progress < 100) {
        self.setData({ show_video_progress: 1, progress_video_per: res.progress })
      } else {
        self.setData({ show_video_progress: 0 })
      }
      console.log('上传进度', res.progress)
      console.log('已经上传的数据长度', res.totalBytesSent)
      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    })
  },

wx.uploadFIle 是微信小程序上传API,这里直接用这个API是它具备进度等信息。


app.util.url('entry/wxapp/TransVideo', { m: 'kbwdl_piaopiaozu' });

 是一个封装好的 ,生成后台api地址的函数而已。您可以按自己的api  代替这个。


本文内容全部结束,感谢您的阅读,希望能对你有所帮助!


更多栏目