Ant Design Upload 自定义上传 customRequest

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

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)}

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

Ant Design Upload 自定义上传 customRequest相关推荐

React Antd Upload自定义上传customRequest
单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖公司代码不可弄,就发一个可用的demo例子 import React, { useState } ...
ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
React开发（267）:ant design upload简单上传
## 如果只是简单的上传,没必要写 customRequest ```javascript<Uploadname="file"action={`${BASE_URL}/com ...
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法使用angular框架写前端的用户一般都比较喜欢用ngZorro,本人最近在使用ngZorro中的Upload自定 ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...
antd design Upload文件上传，删除，批量上传组件封装
1.单个文件上传组件,无文件时显示上传,有文件时显示文件,可删除,重新上传,样式适合图片上传,可根据文件格式更改样式,效果图如下. 页面调用代码 <FormItem{...formItemLay ...
Ant Design Vue 文件上传自定义按钮和文件列表位置
采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-uploadname="file"style="float: left;"@change= ...
React Ant Design UI 图片上传组件代码片段
用户可以上传图片并在列表中显示缩略图.当上传照片数到达限制后,上传按钮消失. import { Upload, Icon, Modal } from 'antd';class PicturesWall ...
Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型
upload创建,accept选择上传的类型,file-list上传的数据,remove点击移除文件时的回调,before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 则停止 ...

Ant Design Upload 自定义上传 customRequest

目录

Upload 常用属性和方法

默认上传

customRequest 自定义上传

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

Ant Design Upload 自定义上传 customRequest相关推荐

最新文章

热门文章