Upload组件 上传文件 antd element 自定义上传
现在市面上有很多的各种各样的组件库,但是基本上都差不多,万变不离其宗,这次咱们就来一起看一看Upload上传文件的组件
基本上都能用到以下属性
accept:接受上传的文件类型 例:.xls,.xlsx 意思就是只能选择xls和xlsx文件,其余的不会让你选择
showUploadList:设置列表交互图标。也可以为布尔值,表示显示与否
beforeUpload: 上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 File 或 Blob 对象则上传 resolve 传入对象);也可以返回 Upload.LIST_IGNORE,此时列表中将不展示此文件。 注意:IE9 不支持该方法
业务流程
主要有两个事件:
1、在上传文件之前,需要把选择的文件存起来,供下一步使用
2、在发送请求的时候把选择的文件带上就OK
实现
第一步(在上传文件之前,需要把选择的文件存起来,供下一步使用):
beforeUpload
这个函数是上传文件之前的函数,函数自带两个实参(见下图):第一个是一个对象 ,里边有你选择文件的基本数据 譬如文件名称、文件大小等。你可以用来展示文件名什么的。第二个是一个File
,我们需要把这个File
存起来,供后边使用
第二步(发送请求):
这一步的难点就是你需要新生成一个formData格式的数据,我把代码贴出来
const formData = new FormData() fileList.forEach(file => { // fileList 是要上传的文件数组(第一步存的) formData.append('file', file) }) // 发送请求复制代码
formData生成之后 在发送请求的时候直接带上去就可以了,浏览器会自动识别(至于用什么发送请求看你自己了,我用的是axios)
一开始我用的是axios,但是不知道为什么这个formData就是带不上去,后来我改成了fetch,感兴趣的话可以瞅一眼
作者:盖了帽了
链接:https://juejin.cn/post/7026543495338950670