赞
踩
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现
<Upload
action="http://xx.xx.xxx.xx:3000/upload/rich_editor_upload"
listType="picture"
defaultFileList={[...fileList]}
onChange={change}
>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
优点:只用写接口,就可以上传文件(内部封装了 上传状态函数,及进度条状态)
缺点:默认上传可以满足我们大部分需求,但是具有局限性,不能够灵活开发。
<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
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) }
写完后就跟默认上传是一样的效果了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。