Element Upload 上传与下载

一、结构

  <el-upload
    class="upload"
    :action="uploadUrl1"
    :before-upload="function (file) { return beforeUpload(1, file)}"
    :on-preview="function (file) { return handlePreview(1, file)}"
    :before-remove="function (file,fileList) { return beforeRemove(1, file, fileList)}"
    :on-remove="function (res,file) { return handleRemove(1, res, file)}"
    :on-success="function (res,file,fileList) { return handleUploadSuccess(1, res, file, fileList)}"
    :on-error="handleUploadError"
    :on-exceed="function (file,fileList) { return handleExceed(1, file, fileList)}"
    :headers="headers"
    multiple
    :limit="uploadLimit1"
    :file-list="fileList1">
    <el-button size="small" type="primary">{{$t('ProjectDetail.uploadBtn')}}<!-- 点击上传 --></el-button>
    <div slot="tip" class="el-upload__tip">{{$t('ProjectDetail.uploadTip')}}<!-- 支持上传doc、png、jpg、pdf等文件 --></div>
  </el-upload>

  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadUrl1: process.env.VUE_APP_BASE_API +
        "/marketingFile/importFile?projectId=" + this.projectId + "&fileBelongType=1",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadLimit1: 5,
      fileList1: []
    }
  },

二、事件

  beforeUpload(type, file) {
    const isSupport = (file.name.toLowerCase().indexOf('.rar') > -1) || (file.name.toLowerCase().indexOf('.zip') > -1) || (file.name.toLowerCase().indexOf('.ppt') > -1) || (file.name.toLowerCase().indexOf('.xls') > -1) || (file.name.toLowerCase().indexOf('.doc') > -1) || (file.name.toLowerCase().indexOf('.png') > -1) || (file.name.toLowerCase().indexOf('.jpg') > -1) || (file.name.toLowerCase().indexOf('.pdf') > -1) ? true : false
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isSupport || !isLt2M) {
      this.$alert(this.$t("ProjectDetail.upLoadErrorTips"), "", {
        confirmButtonText: this.$t("ProjectDetail.Confirm"),
        callback: action => {
        }
      });
    }
    return isSupport && isLt2M
  },
  handlePreview(type, file) {
    downloadFile(file.fileName,file.fileUrl)
  },
  beforeRemove(type, file) {
    if (file.fileId) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  },
  handleRemove(type, file) {
    if (file.fileId) {
      if (type===1) {
        let index = this.fileList1.findIndex(item => item.fileId == file.fileId)
        this.fileList1.splice(index, 1)
      }else if (type===2) {
        let index = this.fileList2.findIndex(item => item.fileId == file.fileId)
        this.fileList2.splice(index, 1)
      }else if (type===3) {
        let index = this.fileList3.findIndex(item => item.fileId == file.fileId)
        this.fileList3.splice(index, 1)
      }
      deleteFile({fileId: file.fileId}).then(res=>{
        console.log("res=====",res)
      })
    }
  },
  handleUploadSuccess(type, response, file, fileList) {
    if (response.code == 0) {
      file.fileId = response.data.fileId
      file.fileName = response.data.fileName
      file.fileUrl = response.data.fileUrl
      if (type===1) {
        this.fileList1.push(file)
      }else if (type===2){
        this.fileList2.push(file)
      }else if (type===3){
        this.fileList3.push(file)
      }
    }else {
      this.$message(`${response.message}`)
      let index = fileList.findIndex(item => item.uid == file.uid)
      fileList.splice(index, 1)
    }
  },
  handleUploadError(error) {
    console.log(error, "error")
  },
  handleExceed(type, files, fileList) {
    this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
  },

三、配置 

  import Cookies from 'js-cookie'

  const TokenKey = 'Admin-Token'

  const OATokenKey = 'OA-Token'

  export function getToken() {
    return Cookies.get(TokenKey)
  }

  export function setToken(token) {
    return Cookies.set(TokenKey, token)
  }

  export function removeToken() {
    return Cookies.remove(TokenKey)
  }

  //存储OAToken用于跳转OA
  export function setOAToken(token) {
    return Cookies.set(OATokenKey, token)
  }
  //获取OAToken用于跳转OA
  export function getOAToken(token) {
    return Cookies.get(OATokenKey)
  }
  //移除OAToken
  export function removeOAToken() {
    return Cookies.remove(OATokenKey)
  }
  export function downloadFile(fileName, fileUrl) {
      var url = process.env.VUE_APP_BASE_API + "/marketingFile/downloadFile?fileName=" + encodeURIComponent(fileName) + "&fileUrl=" + encodeURIComponent(fileUrl)
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true) // 也可以使用POST方式，根据接口
      xhr.responseType = "blob" // 返回类型blob
      var headers = {
          Authorization: "Bearer " + getToken()
      }
      xhr.setRequestHeader("Authorization", "Bearer " + getToken())
          // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function() {
              // 请求完成
              if (this.status === 200) {
                  // 返回200
                  var blob = this.response;
                  if ("msSaveOrOpenBlob" in navigator) { //兼容ie浏览器下载报传递给系统调用的数据区域太小.
                      window.navigator.msSaveOrOpenBlob(blob, fileName)
                  } else {
                      var reader = new FileReader()
                      reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
                      reader.onload = function(e) {
                          // 转换完成，创建一个a标签用于下载
                          var link = document.createElement('a')
                          link.download = fileName
                          link.href = e.target.result
                          document.body.appendChild(link)
                          link.click()
                          document.body.removeChild(link)
                      }
                  }
              }
          }
          // 发送ajax请求
      xhr.send()
  }
  export function downLoad(url, filename) {
    axios({
        method: 'post',
        url: url,
        responseType: 'blob',
        headers: {
            'Authorization': 'Bearer ' + getToken()
        }
    }).then(res => {
        resolveBlob(res)
    })
  }
  export function resolveBlob(blob) {
    const href = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = href
    a.click()
    URL.revokeObjectURL(a.herf)
  }