react oss上传进度条

阿里云oss上传步骤

1. 调用服务端接口uploadPost(),将相应参数传过去。
2. 服务端拿到相应数据,调用oss服务完成签名等信息,返回相应数据。
3. 拿到oss返回的数据,地址、签名、文件路径等信息,进行接口调用数据开始上传。
4. 上传结束后调用验证接口,查看是否上传成功。
   代码如下

const customRequest = async ({ file }) => {
    let dtype = checkImg( file) 
    setIsUploadStart(false)
    uploadPost({
      fileName: file.name,
      fileSize:file.size,
      targetType:'COURSE_PICTURE',
      targetId: targetId || '0',
      fileType:dtype,
      isPublic:isPublic
    }).then((res)=>{
      let { data } = res
      let formDate = new FormData()
      formDate.append("key", data.fileKey)
      formDate.append("OSSAccessKeyId", data.accessId)
      formDate.append("dir", data.dir)
      formDate.append("policy", data.policy)
      formDate.append("signature", data.signature)
      formDate.append("file", file)
      axios.post(`${data.accessHost}`, formDate, {
        headers: {
          "Content-Type": "multipart/form-data",
          "x-requested-with": ''
        },
        onUploadProgress: (progressEvent) =>{
          const { total, loaded } = progressEvent;
          let per = parseInt(loaded / total * 100)
          setPercent(per)
        },
      }).then(res => {
        uploaSuccessdPost({
          fileId:data.fileId
        }).then((res)=>{
          setTextName(file.name)
          success([file.name,data.fileId)
          setUploadSuccess(true)
        }).catch((error)=>{
          setIsUploadFail(true)
        })
      }).catch((error)=>{
        setIsUploadFail(true)
      })
    })  
  }