【React】文件上传组件上传视频到阿里云视频点播

背景 :

如上一篇文章提到, 最近后台管理系统需要增加一个功能 - 上传视频, 需要客户端上传到阿里云视频点播, 传送门 客户端上传视频文件到阿里云点播, 不过这里着重说明的是上传视频到vod后, 如何通过vod查询视频url, 并反写到上传视频list里
这里会涉及到部分文件上传组件的代码, 文件上传完整代码在此不赘述, 传送门 【AntDesign】文件自定义上传组件

技术栈 ：

React + Antd Pro + Antd + 阿里云js sdk视频点播上传

代码 ：

  
  // 上传组件 自定义上传逻辑
  const customRequest = async options => {
    const { file } = options
	const newFileList = [
        ...fileList,
        {
          uid: file.uid,
          name: file.name,
          status: 'done',
          // url: res.path,
          lastModified: file.lastModified,
          lastModifiedDate: file.lastModifiedDate,
          originFileObj: file,
          percent: 100,
          type: file.type,
          image: '',
          size: file.size,
        },
      ]

      if (newFileList.length > 0) {
      // 这里写成异步的原因是把file对象传出去父组件,在父组件进行vod上传并且通过vod查询视频url,再异步返回来, 渲染fileList
        handleMediaResource({ type, fileList: newFileList }).then(res => {
          setFileList(res)
        })
      }
    }

  
  // 父组件 处理组件上传视频后, 上传vod
  const handleMediaResource = val => {
      return new Promise((resolve, reject) => {
        if (val.fileList.length > 0) {
          var a = val.fileList[0]
          // 获取上传凭证和地址
          dispatch({
            type: 'resourceList/getVodUploadCredential',
            payload: {
              params: {
                fileName: a.name,
                fileSize: a.size,
                title: a.name,
              },
              file: a,
            },
          }).then(res => {
          	// 上传到vod
            aliyunVodUpload(res, a).then(fileList => {
              resolve(fileList)
            })
          })
        } else {
          // 删除视频时
          setFieldsValue({ resourceVideo: [] })
          resolve([])
        }
      })
    }

  // 上传到vod
  const aliyunVodUpload = (mes, file2) => {
    return new Promise((resolve, reject) => {
      var UploadAddress = mes.uploadAddress
      var UploadAuth = mes.uploadAuth
      var VideoId = mes.videoId
      var vod

      var uploader = new AliyunUpload.Vod({
        userId: '123',
        region: 'cn-shanghai',
        //分片大小默认1 MB，不能小于100 KB（100*1024）
        // partSize: 1000,
        //并行上传分片个数，默认5
        // parallel: 5,
        //网络原因失败时，重新上传次数，默认为3
        // retryCount: 3,
        //网络原因失败时，重新上传间隔时间，默认为2秒
        // retryDuration: 2,
        // 添加文件成功
        addFileSuccess: function() {
          console.log('添加文件成功')
          uploader.startUpload()
        },
        //开始上传
        onUploadstarted: function(uploadInfo) {
          uploader.setUploadAuthAndAddress(
            uploadInfo,
            UploadAuth,
            UploadAddress,
            VideoId
          )
        },
        //文件上传成功
        onUploadSucceed: function(uploadInfo) {
          if (uploadInfo.videoId) {
            vod = uploadInfo.videoId
            // 根据上传成功的vod反向查询视频url
            dispatch({
              type: 'resourceList/getVodPlayInfo',
              payload: {
                videoId: vod,
              },
            }).then(videoInfo => {
              var v = [
                {
                  uid: videoInfo?.videoId,
                  name: videoInfo?.title,
                  url: videoInfo?.playUrl,
                  title: file2.name,
                  vod,
                  file: file2,
                },
              ]
              setFieldsValue({ resourceVideo: v })
              // 把反向查询后的fileList return给upload子组件去渲染
              resolve(v)
            })
          }
        },
        //文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          console.log('失败上传')
        },
        //文件上传进度，单位：字节
        onUploadProgress: function(uploadInfo, totalSize, loadedPercent) {
          console.log(loadedPercent, 'loadedPercent上传进度')
        },
        //上传凭证或STS token超时
        onUploadTokenExpired: function(uploadInfo) {
          console.log('超时上传')

          uploader.resumeUploadWithAuth(UploadAuth)
        },
        //全部文件上传结束
        onUploadEnd: function(uploadInfo) {},
      })
      let file = file2.originFileObj
      uploader.addFile(file, null, null, null, '{"Vod":{}}')
    })
  }