Vue文件上传实战指南

定义元素 使用原生标签 input

定义了ref 属性，方便引用；使用了v-show 属性默认不显示，定义了type 属性为file 表示上传文件；定义了id 属性 fileInput ; 定义了multiple 支持多选文件上传；定义了accept 属性 从而限制上传的文件类型，但此种方式不能完全避免，还必须加以js 逻辑判断拦截

<inputv-show="false"ref="uploadRef"type="file"id="fileInput"multipleaccept=".doc,.docx,.md,.txt" />

设置文件上传监听事件

1. 先获取到元素 fileInput
2. 对元素进行change事件监听
3. 获取目标元素的event.target.files
4. 对符合条件的文件扩展名进行匹配，判断，拦截不符合要求的文件，并提示

const fileInput = document.querySelector("#fileInput");fileInput.addEventListener("change", event => {const files = event.target.files;const allowedExtensions = ['md', 'doc', 'docx', 'txt'];const filteredFiles = Array.from(files).filter(file => {const ext = file.name.split('.').pop().toLowerCase();return allowedExtensions.includes(ext);});if (filteredFiles.length === 0) return this.$message.warning('只能上传.doc,.docx,.md,.txt类型的文件')else this.uploadFile(files)});

代码主动触发上传文件操作

1.清空文件对象的value

// 选择文件this.$refs.uploadRef.value = ''this.$refs.uploadRef.click()

获取到文件后调用api 上传

1. FormData 文件上传

const formData = new FormData();
Array.from(files).forEach(file => {formData.append("files", file);});APIRequest.uploadRequest({projectId: this.row.id || 0,formData,}).then((res) => {if (res.code == 200) {this.$message.success('上传成功')this.fresh()} else {this.$message.error(res.message || `请求出错`)}})