这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
- 现在市面上有很多的各种各样的组件库，但是基本上都差不多，万变不离其宗，这次咱们就来一起看一看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，感兴趣的话可以瞅一眼
本章更新就到这了，原创不易，转载请注明出处， 感谢
