【vue】使用Formdata上传excel

除了 elementui 的 upload 组件，还可以用 formdata 来上传二进制文件，

首先使用input标签来上传文件

<button class="add-btn">
    导入信息
    <input @change="fileChange" id="DRMD" type="file" class="add-upload"/>
</button>

但是原生的input type=“file”很丑，可以使用一层button将input包起来，给input设置绝对定位并用opacity属性将其隐藏，相关css如下

.add-btn {
    position: relative;
    border: none;
    background-color: #fff;
    width: 80px;
}
.add-upload {
    opacity:0;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
}

绑定的fileChange方法如下

fileChange(){
    let resultFile = document.getElementById('DRMD').files[0];
    const formData = new FormData();
	formData.append('file', resultFile)
    // 下方调接口
    ..
},

注意要将 axios（ajax 的Content-Type置位multipart/form-data）

{
    url: '...',
    method: 'post',//post方法，根据接口需要
    headers:{
		'Content-Type':'multipart/form-data' 
    },
}