这里文件上传文件框的样式美化就不过多赘述了，有很多例子。只介绍一下功能的实现以及注意的问题。
<template> <div>
<span><a href="javascript:;" class="file_prev">本地上传</a><input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)" v-if="clearShow"></span>
</div> </template>
其中，multiple="multiple"代表文件可多选；
给文件选择器绑定change事件让它在上传文件后去执行methods里的函数，@change="changeFn($event)" ；
changeFn(e){ this.deviceArray = []; let deviceFile = e.target.files; let formData = new FormData(); for(let i=0;i<deviceFile.length;i++){ formData.append('file', deviceFile[i]); } this.clearShow = false; let config = { headers: { 'Content-Type': 'multipart/form-data' } } this.$axios.post(this.$API.processManage.processAddCheck, formData, config ).then((res)=>{ console.log(res); this.clearShow = true; },()=>{ this.clearShow = true; }); },
使用FormData()模拟表单提交文件，循环e.target.files的文件添加到FormData()中。
表单上传请求头信息headers: {'Content-Type': 'multipart/form-data'}，
再使用axios配合发送请求这样上传文件功能就基本实现了。
但是其中遇到一个问题就是change事件触发条件是文件上传框内容改变才可以，每次上传完文件默认是不清空上一次上传的内容的，这样上传同名文件就不会触发change事件。
网上现有的方法就是重置input上传文件的标签的dom结构，在vue里我的实现方法就是v-if去控制。
v-if="clearShow"，初始化数据为true，在change事件触发的函数里设置clearShow为false，即移除了该input标签，然后在回调函数中再设置clearShow为true，这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
欢迎交流讨论。
