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)

      }

    }

  }