用el-upload 上传excel文件并下载返回的文件

需求：vue上传excel文件给后台，并下载新的文件。

步骤：

        1.创建html页面，这里用的是dialog弹框，如果是表单再自行修改。

<el-dialog title="导出指定体检信息" :visible.sync="dialogVisibleexptbyfile" width="50%" center :append-to-body="true">
      <div class="submit">
        <el-form :model="form" label-width="140px" label-position="left">
          <el-form-item label="类型">
            <el-select v-model="form.type" placeholder="请选择类型">
              <el-option label="体检号" value="0"></el-option>
              <el-option label="身份证号" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择文件">
            <el-upload class="upload-demo" :limit="1" :on-exceed="exceedfile" :headers="{headers: 'multipart/form-data'}" action="#" :on-change="onChangefile" :before-upload="beforeuploadfile" :auto-upload='false' :before-remove="removefile" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div class="el-upload__tip">只能上传XLS，XLSX格式的文件，数据不能超过4500条</div>
            <!-- <input type="file" id="file" ref="file"> -->
          </el-form-item>
          <el-form-item label="选择行数据">
            <el-input v-model="form.startRow" style="width: 52%;"></el-input>
          </el-form-item>
          <el-form-item label="选择                                                                                                                                          列">
            <el-input v-model="form.colNum" style="width: 52%;"></el-input>
          </el-form-item>
        </el-form>
        <!-- <form action="http://192.168.1.49:5001/yt/tjeBf/" method="post" enctype="multipart/form-data">
          <input type="file" id="file" name="elFile" />
          <input type="submit" value="提交">
        </form> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleexptbyfile = false">取 消</el-button>
        <el-button type="primary" @click="exptbyfile">确 定 导 出</el-button>
      </span>
</el-dialog>

        2.el-upload上面有很多的回调方法，可以去看一下，这里用到了这几个。

        2.1 :limit="1" :on-exceed="exceedfile"。limit用于限制文件的个数，on-exceed用于超过limit数量进行的操作。

   

exceedfile () {
      this.$message.warning('只能上传一个文件，请删除后添加！')
},

        2.2:headers="{headers: 'multipart/form-data'}"。设置上传的请求头。

        2.3:on-change="onChangefile"。当文件变化的时候触发的函数。可以进行文件类型的验证，包括文件大小，格式啊等等。我在这里存了一下文件的数据。

onChangefile (file) {
      // file文件改变
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      //这里我需要上传表格文件，所以做了限制
      if (['xls', 'xlsx'].indexOf(testmsg.toLowerCase()) == -1) {
        this.$message.warning('只能上传.XLS.XLSX格式的文件!')
        this.fileList.shift()
        return
      }
      //将选取的文件拿到，这里需要根据自己业务来写
      this.fileList[0] = file
      this.file = file.raw
      this.filename = file.name
    },

        2.4 before-upload="beforeuploadfile"。

        2.5 auto-upload='false'。避免自动上传。同时action设置为“#”，可以为任意的值。

        2.6 before-remove="removefile"。用于清空文件列表数组，避免删除了文件但是数组中还有的情况。

        

removefile () {
  this.fileList = []
},

        3.以上都做完了就可以点击确认跳转到上传的部分了。执行enterfile的函数。这里用的是formData来存储文件类型的数据和其他的数据。formData可以看一下这个（FormData - Web API 接口参考 | MDNFormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。https://developer.mozilla.org/zh-CN/docs/Web/API/FormData）。

exptbyfile () {
       //  对数据的一些判断
      if (this.fileList.length == 0) { 
        Utils.showTis('请上传文件', 'warning')
        return
      }
      if (this.form.type == "") {
        Utils.showTis('请选择类型', 'warning')
        return
      }
      if (this.form.sheetIndex == "") {
        Utils.showTis('请输入行数', 'warning')
        return
      }
      if (this.form.colNum == "") {
        Utils.showTis('请输入列数', 'warning')
        return
      }
      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('file', this.file) //添加文件对象 

      //调用上传接口
      let userinfo = User.getData("userInfo");
      var params = {
        type: this.form.type,
        sheetIndex: this.form.sheetIndex,
        startRow: this.form.startRow,
        colNum: this.form.colNum,
        token: userinfo.token,
        cid: userinfo.cid
      };
      this.downLoadFile(this.file, "yt/tjeBf", params, document.getElementById("file"))
      .then(res => {
        this.dialogVisibleexptbyfile = false
        if (res.code) {
         Utils.showTis(res.msg, 'warning')
        }
      }).catch(() => {
        this.dialogVisibleexptbyfile = false
      })
},
downLoadFile (res, url, params = {}) {
    return new Promise((resolve, reject) => {
    let loadingInstance = this.$loading({
      lock: true,
      text: '上传中…',
      background: 'rgba(0, 0, 0, 0.3)'
    });


    let userinfo = User.getData("userInfo");
    var formData = new FormData();
    formData.append("token", userinfo.token);
    formData.append("cid", userinfo.cid);
    formData.append("file", res);

    for (var i in params) {
      formData.append(i, params[i]);
    }
    $.ajax({
      url: Config.gw.base + url,
      type: "POST",
      data: formData,
      cache: false, //上传文件无需缓存
      processData: false, //用于对data参数进行序列化处理 这里必须false
      contentType: false, //必须*/
      xhrFields: { responseType: "blob" }, // 返回的数据类型是Blob类型
      success: function (data) {
        loadingInstance.close();
        if (data.code) {
          // showTis("上传错误", data.msg)
          resolve(data)
        } else {
          let url = window.URL.createObjectURL(new File([data], res.name))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', `体检名单档案${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}${new Date().getHours()}${new Date().getMinutes()}${new Date().getSeconds()}.xlsx`)
          document.body.appendChild(link)
          link.click()
          // 释放URL对象所占资源
          window.URL.revokeObjectURL(url)
          // // 用完即删
          document.body.removeChild(link)
          resolve(data)
        }
      },
      error: function (error, err2, err3) {
        loadingInstance.close();
        showTis("上传错误，请联系管理员")
        reject(error)
      }
    });
  })
}

下载用的是a链接的方法，创建a链接给url即可。方法如下（上面有）：

let url = window.URL.createObjectURL(new File([data], res.name))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', `体检名单档案${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}${new Date().getHours()}${new Date().getMinutes()}${new Date().getSeconds()}.xlsx`)
          document.body.appendChild(link)
          link.click()
          // 释放URL对象所占资源
          window.URL.revokeObjectURL(url)
          // // 用完即删
          document.body.removeChild(link)

不知道记录清楚没有，下次用到可以直接拿来用就最好啦！