Vue Element UI 实现文件excel的上传及下载2种方式（文件流及a标签）

工作上需求上传excel，下载源文件excel，上传使用的是Element ui 里的 el-upload，下载说2种方式，亲测都可以

项目样式 上传excel

html 部分

<el-form-item label="上传">
   <el-upload
     class="upload-demo"
     ref="upload"
     action="#"
     :limit="1"
     :http-request="uploadOk"
     :on-preview="handlePreview"
     :before-upload="beforeAvatarUpload"
     :on-remove="handleRemove"
     :file-list="fileList"
     :auto-upload="true">
     <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
   </el-upload>
 </el-form-item>

参数解释 方法解释
action 必选参数，上传的地址
:limit 最大允许上传个数
:http-request 覆盖默认的上传行为，自定义上传
:on-preview 文件上传时的钩子
:before-upload 上传文件之前的钩子
:on-remove 文件列表移除文件时的钩子
:file-list 上传的文件列表
:auto-upload 是否在选取文件后立即进行上传

JS 事件部分

  // 上传前验证
 beforeAvatarUpload(file) {
   let Xls = file.name.split('.'); 
   if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
     return file
   }else {
     this.$message.error('上传文件只能是 xls/xlsx 格式!')
     return false
   }
 },
 handleRemove(file, fileList) {
   console.log(file, fileList);
 },
 handlePreview(file) {
   console.log(file);
 },
 // 上传成功
 uploadOk(val){
   let fd = new FormData()
   fd.append('upload_file',val.file)
   fd.append('dir_name','contract')
   // console.log(fd.upload_file)  错误
   // console.log(fd.get("upload_file")  正确
   this.$post('/upload/uploadFile', fd).then((result) => {
     if (result.code == 200) {
       this.$message({
         message: '上传成功',
         type: 'success'
       });
       // 接收excel文件地址
       this.addForm.addurl = result.data.file_url
     }else{
       this.message(result.msg)
     }
   })
 },

注意一下：上传文件必须为FormData 所以这边New FormData() ，把上传文件的File填进去。
注意一点 打印console.log(FormData.file) 是打印不出来的 ,需要用 到 FormData.get(’’) ！！！！是个坑 是个坑

下载a标签方式

// 下载源文件
  handleDownload: function(index, row){
    if(row.contract_file_url == ''){
      this.$message({
        message: '没有源文件',
        type: 'warning'
      })
    }else{
      // 创建a标签 
      let link = document.createElement('a')
      // href链接 
      link.setAttribute('href', row.contract_file_url)
      // 自执行点击事件
      link.click()
    }   
  },

row.contract_file_url 是我从表格里拿到的下载文件地址

文件流方式

如果后台传给你的是这种东西 不要慌 你只需要

this.$get('/documentflow').then(res => {
	let blob = new Blob([res], {type: "application/vnd.ms-excel"}); //res 就是文件流了
	let objectUrl = URL.createObjectURL(blob);
	window.location.href = objectUrl
})

这样就ok了 大胆的测试一下吧

总结

有问题欢迎留言私信，也可以留下更好的方案和思路，一起学习完善。
对你有帮助的话可以点个赞哦！！！