zoukankan      html  css  js  c++  java
  • 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)
          }
        }
      }
  • 相关阅读:
    浅谈ConcurrentHashMap实现原理
    HashMap底层实现原理及扩容机制
    浅谈fail-fast机制
    《从Lucene到Elasticsearch:全文检索实战》学习笔记五
    《从Lucene到Elasticsearch:全文检索实战》学习笔记四
    JVM垃圾回收算法解析
    《从Lucene到Elasticsearch:全文检索实战》学习笔记三
    《从Lucene到Elasticsearch:全文检索实战》学习笔记二
    python print()内置函数
    《从Lucene到Elasticsearch:全文检索实战》学习笔记一
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/14010469.html
Copyright © 2011-2022 走看看