Vue.js 文件上传限制类型上传与限制选择的文件类型

只能限制某种文件上传，如果新选择其他文件便提示文件错误，清空文件列表

:accept="'.pdf'" ---> 选择上传文件的时候自动匹配pdf的文件类型

:file-list="[row]" ref="uploadFile" ---> 获取到文件

<el-upload class="file-upload" :action="actionUrl" :accept="'.pdf'":on-success="(res, file) => handleSuccess(res, file, row)" :http-request="handleUpload":show-file-list="false" :file-list="[row]" ref="uploadFile"><el-button type="primary" plain>附件上传</el-button></el-upload>

实现方法：

handleSuccess(res, file, row) {const data = res.data;this.$set(row, "type", 1);this.$set(row, "fileName", data.name + '.' + data.suffix);row.sourceId = data.id//这里设置 只能上上传 pdf 的文件let fileName = file.name;let pos = fileName.lastIndexOf(".");let lastName = fileName.substring(pos, fileName.length);console.log(lastName,lastName.toLowerCase());if (lastName.toLowerCase() !== ".pdf") {this.$message.error("文件必须为.pdf类型");// 这里跟下面的赋值数组为空是一样的，也是把数组里面的值删除// for (let i = 0; i < this.standardChange.length; i++) {// if (this.standardChange[i].sourceId === row.sourceId && lastName.toLowerCase() !== ".pdf") {//this.standardChange.splice(i , 1);// }// }// 这里直接赋值为空，有个问题就是如果有文件的话就会全部都删除this.standardChange = [];// 这里选择其他文件的时候并没有清空列表// this.$refs.uploadFile.clearFiles();return false;}},

最后选择文件的时候：选择其他文件的时候：列表清空已解决，通过拿到存放文件的列表直接赋值为空