element ui导入/上传-导出/下载

一、导入/上传

1. 导入excel（阻止默认传）部分代码如下

    
        上传Excel
    
    
        取 消
        确定
    
    
    handleChange(file){
        let isFile = false;
        let arr = file.name.split('.')
        let suffix = arr[arr.length - 1]
         if(file.type ==  'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || suffix == 'xlsx' || suffix == 'xls'){
            isFile = true;
        }else{
            isFile = false;
        }
        if (!isFile) {
            this.$message.error('上传文件只能是xlsx/xls格式!');
            this.fileList = []
        }
        return isFile;
    },
    uploadSuccess(res,file){
        if(res.statusCode === '0') {
            this.$message.success(res.message)
        } else{
            this.$message.error(res.message)
            this.fileList = []
        }
    },
    uploadError(res){
        this.$message.error(res.message)
    },
    handleExceed(files, fileList) {
        this.$message.error('最多只能上传一个Excel文件!');
    },
    importExcelSubmit() {
        this.$nextTick(() =>{
            this.$refs.excelUpload.submit()
        })
    },
 
  :on-remove="handleRemove"
  如果你是要上传多个文件，然后又删除了几个，这个函数也不需要写
  上传图片时只会传当前列表上展示的文件

• action后面接的地址是后台给的地址
• :with-credentials="true" 支持发送 cookie 凭证信息
• limit accept
  limit 限制最大上传数
  :limit=9

accept允许上传的格式

如果需要提示信息可以在对应的方法里面配置
这儿因为设置了:auto-upload="false"

所以需要在:on-change绑定的函数里面做相对应的操作，
:before-upload 这个并不会执行

// :on-exceed="handleExceed"
    handleExceed() {
      this.$message.error('最多上传N张!');
    },

• 判断当前文件格式type: ''
  遇到上传excel文件 type为空的情况
  可以对name进行判断，name可以拿到文件的后缀名
• 上传携带token

:headers="token"
  // token: {}
 this.token.XXX = sessionStorage.getItem('UserToken')
// token可以在钩子函数mounted里面获取

• 阻止自动上传

:auto-upload="false"
// 最后在提交的时候使用以下方法才是真正提交
 this.$nextTick(() =>{
    this.$refs.excelUpload.submit()
 })

2. 上传图片（表单中上传图片必填）部分代码如下

 
    
        点击上传
    
 
    handleMultSuccess (file, fileList) {
    //这边对接口返回的cdoe验证是否上传成功如果成功做以下操作
        this.data.imageUrl.push({
            name: fileList.name,
            url: fileList.XXX.url + fileList.XXXX.fileName
        })
        this.fileList.push(fileList.response.data.url + fileList.response.data.fileName)
        this.$refs['form'].validateField('imageUrl')
    },
    beforeupload(file) {//封面图上传
        const isImage = /^image\/\w+$/.test(file.type)
        if (!isImage) {
            this.$message.error('只能上传图片格式!');
        }
        return isImage
    },
    handleError() {
        this.$message.error('网络有误请稍后再试～');
    },
    handleRemove(file,fileList) {
        let flag = ''
        this.data.imageUrl.map((item,index)=>{
            item.url == file.url ? flag =  index : ''
        })
        flag !== '' ? this.data.imageUrl.splice(flag,1) : ''
        this.fileList.indexOf(file.url) > -1 ? this.fileList.splice(this.fileList.indexOf(file.url),1) : ''
    }

• :multiple=true
  选择文件的时候是否可以一次性选择多个还是只能一个个点击
• 多张图片的删除，上传
  我在这儿设置了两个变量，this.data.imageUrl是为了表单校验它是必填项，
  最后传给后台的值是从this.fileList中取的
• 上传图片在表单中需要必传

:on-success函数中写下面这段代码
 this.$refs['form'].validateField('imageUrl')

二、导出

1. 后台返回地址

  导出
      exportData() {
          XXXX(this.form).then(data => {
            if(data.status == 200){
              this.download(data.request.responseURL);
            }
          });
      },
      download(url) {
          let iframe = document.createElement("iframe")
          iframe.style.display = "none";
          iframe.src = url;
          document.body.appendChild(iframe);
      },

2. 后台返回流

• 直接利用表单form submit (抽子组件)

导 出
//封装的子组件

 exportUrl(){
      this.options = {columns:"id,code,XXX",...this.condition}
      this.$nextTick(_ => {
        this.$refs.exportForm.$refs.hiddenForm.submit()
      })
 },
// 子组件

• 用原生JS创建表单form

  exportFile(){
      var conf = {method:'get',action:'url',data:{columns:"id,code,XXXXX",...this.condition}}
      this.postDownLoadFile(conf);
  },
  export const postDownLoadFile = function(options) {
      let config = { method: 'post', ...options };
      let $iframe = document.getElementById('down-file-iframe');
      if (!$iframe) {
          $iframe = document.createElement('iframe');
      }
      //$iframe.childNodes.remove();
      let $form = document.createElement('form');
      $form.setAttribute('target', 'down-file-iframe');
      $form.setAttribute('method', config.method);
      $form.setAttribute('action', `${config.action}`);
  
      for (var key in config.data) {
          let $input = document.createElement('input');
          $input.setAttribute('type', 'hidden');
          $input.setAttribute('name', key);
          $input.setAttribute('value', config.data[key]);
          $form.appendChild($input);
      }
      $iframe.appendChild($form);
      document.body.appendChild($iframe);
      $iframe.getElementsByTagName('form')[0].submit();
      document.body.removeChild($iframe);
  }

• new FileReader()

 导出订单
  exportData () {
      XXXXX(param).then((response) => {
          this.$loading().close()
          let reader = new FileReader()
          reader.readAsText(response.data, 'utf-8')
          reader.onload = (e) => {
            try {
              const response = JSON.parse(reader.result)
              this.$message({ showClose: true, message: response.errMsg || '导出失败', type: 'error' })
            } catch (e) {
              let filename = response.headers['content-disposition'].split('filename=')[1]
              filename = decodeURI(decodeURI(filename))
              download(response.data, filename, 'text/plain')
            }
          }
      })
  }