本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现
目录
Upload 常用属性和方法默认上传customRequest 自定义上传Upload 自定义上传逻辑的实现+进度条实现Upload 常用属性和方法
默认上传
<Uploadaction="http://xx.xx.xxx.xx:3000/upload/rich_editor_upload"listType="picture"defaultFileList={[...fileList]}onChange={change}><Button icon={<UploadOutlined />}>Upload</Button></Upload>
优点：只用写接口，就可以上传文件（内部封装了 上传状态函数，及进度条状态）
缺点：默认上传可以满足我们大部分需求，但是具有局限性，不能够灵活开发。
customRequest 自定义上传
<Uploadaction="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 自定义上传逻辑的实现+进度条实现
<Uploadaction="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)}
写完后就跟默认上传是一样的效果了
