Ant Design Upload 自定义上传 customRequest

本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现

Upload 常用属性和方法

默认上传

 <Upload
            action="http://xx.xx.xxx.xx:3000/upload/rich_editor_upload"
            listType="picture"
            defaultFileList={[...fileList]}
            onChange={change}
          >
            <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>

优点：只用写接口，就可以上传文件（内部封装了 上传状态函数，及进度条状态）
缺点：默认上传可以满足我们大部分需求，但是具有局限性，不能够灵活开发。

customRequest 自定义上传

 <Upload
            action="http://xx.xx.xxx.xx:3000/upload/rich_editor_upload"
            customRequest={uploadFile}
            listType="picture"
            defaultFileList={[...fileList]}
            onChange={change}
          >
            <Button icon={<UploadOutlined />}>Upload</Button>
 </Upload>
 uploadFile(file=>{
 	update(file).then(res=>{
		
	})
 ])

customRequest属性覆盖默认上传行为,此时action属性不在触发

优点：可根据自己的需求对上传文件前后的回调做相应的处理

缺点：上传状态函数，及进度条状态展示 都需要后来自己添加

Upload 自定义上传逻辑的实现+进度条实现

 <Upload
            action="http://47.95.197.56:3000/upload/rich_editor_upload"
            customRequest={uploadFile}
            listType="picture"
            defaultFileList={[...fileList]}
            onChange={change}
          >
            <Button icon={<UploadOutlined />}>Upload</Button>
 </Upload>

  const uploadFile = async (file) => {
    console.log("uploadFile方法")
    console.log(file)

    uploadApi({
      file: file.file,
      onUploadProgress: (ev) => {
        // ev - axios 上传进度实例，上传过程触发多次
        // ev.loaded 当前已上传内容的大小，ev.total - 本次上传请求内容总大小
        console.log(ev)
        const percent = (ev.loaded / ev.total) * 100
        // 计算出上传进度，调用组件进度条方法
        file.onProgress({ percent })
      },
    })
      .then((res) => {
        console.log("上传成功" + res)
        file.onSuccess(res, file)
      })
      .catch((err) => {
        file.onError(err)
      })
  }
  const uploadApi = async ({ file, onUploadProgress }) => {
    console.log("uploadApi方法")
    const fd = new FormData()
    fd.append("file", file)
    const res = await upLoad(fd, onUploadProgress)
    // //上传成功后
    // onSuccess(res.data, file)
    console.log(res)
    // console.log(fileList)
  }

写完后就跟默认上传是一样的效果了