当前位置:   article > 正文

Ant Design Upload 自定义上传 customRequest

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

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=>{
		
	})
 ])
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  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)
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/339161
推荐阅读
相关标签
  

闽ICP备14008679号