#yyds干货盘点#前端如何通过antdv组件上传文件 _文件

从来好事天生俭，自古瓜儿苦后甜。这篇文章主要讲述#yyds干货盘点#前端如何通过antdv组件上传文件相关的知识，希望能为你提供帮助。
前言上传文件到云存储一般有两种方式：前端上传和后端上传；
前端上传就是前端自己上传到OSS云存储，然后将远程链接传给后端；
后端上传就是前端只负责上传本地文件，然后后端酌情处理，可以上传到云存储，也可以本地存储；
因为andtv官方的例子就是介绍的第二种，所以本篇我们来介绍第一种方式，前端自己上传到云存储；
目录

组件介绍
上传例子
踩坑记录

正文 1. 组件介绍
Upload组件有很多属性，这里我们只关注下面几个即可：

参数	说明	类型	默认值
accept	接受上传的文件类型, 详见 input accept Attribute	string	无
action	上传的地址	string\|(file) => `Promise`	无
beforeUpload	上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。	(file, fileList) => `boolean \| Promise`	无
customRequest	覆盖默认的上传行为，实现自己的上传方式	Function	无
remove	点击移除文件时的回调，返回值为 false 时不移除	Function(file): `boolean \| Promise`	无
multiple	是否支持多选文件	boolean	false
fileList	已经上传的文件列表	object[]	无

accept：因为本篇我们只需要上传PDF文件，所以这里的accept=.pdf
action：接受一个后端地址作为属性值，本地文件会被上传到指定的地址进行处理；
beforeUpload：这个属性会在选中文件后，上传文件前触发；这里的作用主要是为了获取上传的文件列表
customRequest：它是本篇的核心，就是覆盖原有的action操作，自己实现特定的上传方式，比如上传到阿里云、其他云等等
fileList：配合beforeUpload，用来展示已经上传的文件列表

这个Upload组件内部有一个隐藏的元素，用来展示已经上传的文件列表；
没有上传文件时，该元素不会显示；
当上传了文件后，该元素会显示上传的文件列表；
2. 上传例子
下面我们就开始写这个自定义上传的例子，代码只展示了关键部分
html部分如下：

< a-upload accept=".pdf" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" :customRequest="handleUpload"> < a-button> < a-icon type="upload" /> 点击上传文件（仅支持PDF格式）< /a-button> < /a-upload>

js部分如下：

handleRemove(file) const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; ,beforeUpload(file, fileList) this.fileList = fileList console.log(file:, file) console.log(fileList:, fileList) return true; ,handleUpload(data) console.log(data) const _this = this const file = data.file if(file) client.put(pdf/+file.name, file).then(res=> console.log(结果:, res) _this.detailNew = Object.assign(, this.detailNew, filePath: res.url) ) else console.error(没有选择文件),

阿里云上传接口，其他云存储的接口类似，都是创建一个客户端对象，然后在需要的地方引入使用

import OSS from ali-oss; const client=new OSS( region: ***, accessKeyId: ***, accessKeySecret: ***, bucket: *** )export client

然后在提交表单时，直接post提交this.detailNew对象即可，该对象内部包含了文件的云存储路径
3. 踩坑记录

customRequest赋值问题

如果给属性customRequest赋值为handleUpload(data)，而不是函数名handleUpload；
那么vue的任意一个属性每刷新一次，就会触发一次handleUpload(data)函数的执行；
因为这里给customRequest赋值的不是函数，而是函数的代码块；
当视图初始化时，会先触发一次函数的执行；
然后在后面的视图刷新时，还会不断的触发；
而且当你上传了文件，还会提示400错误，因为这时的customRequest已经不是自定义的上传文件属性了，所以系统还会去找默认的上传路径；

文章图片

解决办法：就是给customRequest赋值时，要赋值一个函数名，而不是函数名+参数；不然该属性的值就会变成函数的执行代码块，然后每触发一次，就自动执行一次

beforeUpload的返回值问题

beforeUpload的返回值如果是false，则表示停止上传；
刚开始我的理解是停止默认的上传，所以我就返回false；
然后当我上传了文件后，发现死活触发不了customRequest中的自定义上传；
改为true后，发现就上传成功了，说明这里的false指的是停止后续所有的上传操作，包括默认的上传和自定义的上传；
解决办法：只有在不需要上传文件时，才可以设置成false返回；多测试，多理解；

上传进度没显示

这是因为我们用了自定义的上传方式，所以默认的上传进度就失效了；
默认的上传进度可以在@change中监听变化事件，然后根据文件上传后服务器的响应来进行处理，如果返回200，则成功，返回错误则失败；
所以这里的上传进度需要我们自己实现，我们可以直接在上传按钮上添加一个loading属性：

开始上传时，设置为true；
上传完成时，设置为false；

< a-button:loading="loading"> < a-icon type="upload" /> 点击上传文件（仅支持PDF格式）< /a-button>

在beforeUpload中设置为true：

beforeUpload(file, fileList) this.fileList = fileList console.log(file:, file) console.log(fileList:, fileList) this.loading = true return true; ,

在上传到阿里云后，设置为false：

handleUpload(data) console.log(data) const _this = this const file = data.file if(file) client.put(pdf/+file.name, file).then(res=> console.log(结果:, res) _this.detailNew = Object.assign(, this.detailNew, filePath: res.url) _this.loading = false ) else console.error(没有选择文件),

总结本篇主要介绍了通过antdv的upload组件，实现自定义上传文件到云存储的方法，核心就是customRequest属性；
默认的上传其实是最方便的，前端只需要把本地文件传给后端就可以了，后端再去上传文件到各种云；
【#yyds干货盘点#前端如何通过antdv组件上传文件】但就是需要配合；