1. 上传 EXCEL

Upload组件 点击跳转到该组件官方文档

用到的upload组件参数

组件代码

html

<el-upload
    style="display: inline; margin-left: 10px;margin-right: 10px;"
    action=""
    :http-request="uploadFile"
    :limit=1
    :on-exceed="fileExceed"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :file-list="uploadList"
    ref="fileupload">
</el-upload>

–申明–
style: 按项目须要增添，请按需保存
action：必须，自定义上传直接给空串；非自定义，将地点赋给action合营属性headers、on-success、on-error等
http-request：自定义要领，依据要求的相应手动完成on-success、on-error
file-list：本项目有清空须要【代码略】
ref：该上传组件安排dialog中，本项目有置空需求【代码略】，请按需保存

js

import HTTP_API from '@/httpApi' //  封装好的axios:get post要求（含headers和拦截器等【代码略】）

// methods
fileExceed () {
  this.$message.error('别贪婪！一次只能上传一个哦~');
},

  // 要求胜利
importSuccess (res) {
    // 后端的返回码--上传胜利
  if (res.code == xxxxx) {
    // 显现√图标
    let e = document.getElementsByClassName('el-upload-list__item-status-label');
    e[0].setAttribute('style', 'display:block !important')
    // 胜利提醒
    this.$message.success('上传胜利');
    // 从新挪用列表要求（代码略）
    this.getList();
    // 后端的返回码--上传失利
  } else {
    // 隐蔽√图标
    let e = document.getElementsByClassName('el-upload-list__item-status-label');
    e[0].setAttribute('style', 'display:none !important')
    // 失利提醒--及后端返回的失利概况
    this.$message.error({
      dangerouslyUseHTMLString: true,
      duration: 4500,
      message: res.remark+',<br/>请删除上传失利的文件，修改后从新上传'
    });
  }
},

  // 要求失利
importError (err) {
  this.$message.error({
    dangerouslyUseHTMLString: true,
    duration: 4500,
    message: '上传出现非常，请稍后重试'+',<br/><br/>非常缘由：'+err
  });
},

  // 自定义上传
uploadFile (item) {
  const form = new FormData()
  form.append('file', item.file)
  HTTP_API.xlsx_upload(form).then(res => {
    this.importSuccess(res)
  }).catch(err => {
    this.importError(err)
  })
}

2. 下载 EXCEL（长途地点/文档流）

button组件

组件代码

html

<el-button type="primary" @click="downTemplate" round>下载模板</el-button>

js–后端返回下载地点

import axios from 'axios'

// methods
// 导出模板
downTemplate () {
  axios({
    method: 'get',
    url:'xxx相对地点xxx',
    responseType: 'blob'
  }).then(res => this.downloads(res.data, res.headers.filename))
},

// 建立模板下载链接
downloads (data, name){
  if(!data){
    return
  }
  let url = window.URL.createObjectURL(new Blob([data]))
  let link = document.createElement('a')
  link.style.display ='none'
  link.href = url
  link.setAttribute('download', `前端拼接后端返回的名字${name}.xlsx`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
},

js–后端返回文档流

import HTTP_API from '@/httpApi' //  封装好的axios:get post要求（含headers和拦截器等【代码略】）

// methods
// 导出excel
let selectedParams = {
  ids : this.idList.join(',')    //导出前提（根据选中的ID来导出，按现实需求）
}
// 处理文档流乱码题目设置相应范例
HTTP_API.exportSelected(selectedParams, {responseType: 'arraybuffer'}).then(res => {
  let url = window.URL.createObjectURL(new Blob([res], {type: "application/vnd.ms-excel;charset=UTF-8"}))
  let link = document.createElement('a')
  link.style.display ='none'
  link.href = url
  link.setAttribute('download', '纪录列表.xls')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
});

3. 结束语

1. 上传action必须有，空串也好，随意写点也行，横竖得有
2. element的提醒许可html代码，然则要设置dangerouslyUseHTMLString为true
3. 上传的要求胜利（状况码200）不等于上传胜利，element的√图标，须要用js完成显现隐蔽
4. 下载时文件名称为动态时，要求后端辅佐在相应的头部增添filename字段（filename字段中含笔墨会有题目，后端给我日期数字，雷同的笔墨部份前端拼接）
5. responseType设置为blob或许arraybuffer从效果上是一样的。点击跳转responseType文档