首页 > Web开发 > 详细

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

时间:2020-11-20 15:07:05      阅读:83      评论:0      收藏:0      [点我收藏+]
接口
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)
      }
    }
  }

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

原文:https://www.cnblogs.com/hellofangfang/p/14010469.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!