Vue Excel文件的下载和上传（formData）

Vue Excel文件的下载和上传（formData）

在本文中传给后台的数据为FormData，首先介绍Excel文件的上传和下载代码。

HTML代码，其中引用了Element-UI的button

<el-button type="success" @click="download" >表格下载</el-button>
<input style="display:none;" id="up" ref="file" type="file" class="form-control" @change="importFile"> 
<label for="up"> 
    <span class="importButton">表格导入</span>
</label> 

导入方法：

//导入
 importFile(e){
   let _this = this;
   //声明一个FormDate对象
   let formData = new FormData();
   //把文件信息放入对象中
   formData.append("file", e.target.files[0]);
   let file = e.target.files[0]
   let name = e.target.files[0].name;
   //调用后台接口函数
   importOrder(formData).then(function(res) {
    //此处必须将控制导入的input值进行置空，否则不会触发change事件，会导致同一个文件不能二次导入
       document.getElementById('up').value = null;
       console.log(res)
       if(res.data.code == 200){
           _this.$message({
	           type:'success',
	           message:'导入成功'
           })
           //此处是导入之后重新获取列表（由于该函数相关性不大，不再展示）
           _this.getList()
       }else{
           _this.$message({
               type:'error',
               message:res.data.msg
           })
       }
       }).catch(err=>{
           _this.$message({
               type:'error',
               message:'导入失败'
           })
       })
   },

下载方法：

 //下载
 download(){
 	//调用后台接口函数
   downloadOrder().then(res=>{
   	 //调用成功，在html中创建一个a元素
     let aTag = document.createElement('a');
     //创建一个blob对象
     let blob = new Blob([res.data],{
     	//Excel文件版本
       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
     });　　// 这个content是下载的文件内容，自己修改
     aTag.download = '订单导入模板';　　　　　　// 下载的文件名
     aTag.href = URL.createObjectURL(blob);   //创建一个URL对象
     aTag.click();　　　　　　　　　　　　　　
     URL.revokeObjectURL(blob);          //释放URL对象
   }).catch(err=>{console.log(err)})
 },

Blob对象 ---- 表示一个不可变、原始数据的类文件对象
blob对象介绍相关链接：
HTML5中的Blob对象的使用
Web API 接口参考–Blob
FormData对象 ---- FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出。
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件
formData相关链接
FormData使用方法详解
new FormData() - FormData对象的作用及用法
e.target.files[0] ---- 文件信息
剖析相关链接
e.target.files[0]层层剖析