vue excel上传与下载

上传

    <el-form-item label="批量创建">
           <el-upload
            ref="upload"
            class="upload-demo"
            :auto-upload="false" 
            accept=".xls, .xlsx"
            action
           
            :http-request="httpRequset"
            :file-list="fileList"
             >
             <a class="text_underline">点击选择文件！</a>
          </el-upload>
          <el-button type="text" class="template_down" @click="onExportTemplate">（点击下载模版）</el-button>
        </el-form-item>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button
            class="cancel" 
            @click="cancelForm('Form')"
            >取消</el-button
          >
          <el-button type="primary" class="submit" @click="submitExport">
            确定
          </el-button> 
      </div>
    </el-dialog>

    httpRequset(data) {
      this.$set(this.fileList, "0", data.file); // 储存选择的文件
    },

    submitExport(){
      this.$refs.upload.submit(); // 必要
      let fd = new FormData(); // 必要
      fd.append("file", this.fileList[0]);// 必要
      import(fd)
        .then(res => {
          const { code, data, message } = res;
          if (code == 200) {
            this.fileList = [];
            this.$message.success('导入成功');
          } else {
            this.$message.error('上传失败，将自动下载失败原因');
          }
        })
        .catch(e => {
          this.cancel();
        });
    },



// 上传接口
export const import= (data) => {
  return request({
    url: '/xxx/import',
    method: 'post',
    data,
  })
}

下载
 

// 下载
export const exportTemplate= (data) =>{
  return request({
    url: '/xxx/exportTmplate',
    responseType: 'arraybuffer', // 浏览器响应文件格式，下载必须
    method: 'get',
    params:data
  })
}


  //  下载模版
    onExportTemplate() {
      exportTemplate({},this.StageEntity.robotId).then(res => {
        let blob = new Blob([res.data], { type: "application/x-msdownload" });
        saveAs(
          blob,'导入模板.xlsx'
        );
      });},

接口

responseType: 'arraybuffer',  // 下载需要，上传不需要

method: 'get', // 一般下载get，上传post

下载用saveAs 插件处理文件流