vue 上传下载删除附件 用到blob

接口
export function uploadFileEvaluation(data) {
  return request({
    url: `${prefix}/tqmevaluation/uploadfile`,
    method: 'post',
    data
  })
}
export function downloadFileEvaluation(name) {
  return request({
    url: `${prefix}/tqmevaluation/downloadfile`,
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data: name,
    responseType: 'blob'
  })
}
export function removeFileEvaluation(name) {
  return request({
    url: `${prefix}/tqmevaluation/delDoc`,
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data: name
  })
}
 
//方法
methods: {
    // 上传
    async uploadFile(param) {
      const form = new FormData()
      form.append('file', param.file)
      const res = await uploadFileEvaluation(form)
      if (res.code === 20000) {
        this.$message.success(res.message)
        // 附件列表
        this.fileList.push(
          {
            lngtqmevaluationdetailid: this.row.lngtqmevaluationdetailid,
            strtqmdocumentname: param.file.name,
            strtqmdocumenturl: res.data
          }
        )
      }
    },
    // 下载
    async downloadFile(row) {
      const res = await downloadFileEvaluation(row.strtqmdocumenturl)

      var blob = new Blob([res], { type: '' })
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = row.strtqmdocumentname // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    // 删除
    async removeFile(row) {
      const res = await removeFileEvaluation(row.strtqmdocumenturl)
      if (res.code === 20000) {
        this.$message.success(res.message)
        // 删除显示数据
        this.fileList = this.fileList.filter(item => item.strtqmdocumenturl !== row.strtqmdocumenturl)
      }
    }
  }
原文地址:https://www.cnblogs.com/hellofangfang/p/14010469.html