文件的上传、下载、删除

因为文件下载时，接口未返回一个code来判断文件是否下载成功，所以要全局配置，在request.js文件中配置。

 接口方法：

import request from '@/utils/request'
// 附件下载
export function downloadFile(params) {
  return request({
    url: '/szdj-eval/evalTask/download',
    method: 'get',
    responseType: 'blob',
    params
  })
}
// 上传附件
export function uploadFile(data) {
  return request({
    url: '/szdj-eval/evalTask/upload',
    method: 'post',
    data
  })
}
// 删除附件
export function delFile(params) {
  return request({
    url:'/szdj-eval/evalTask/deleteFile',
    method:'get',
    params
  })
}

<div class="table-head">
          <div>附件</div>
          <div class="table-btn" v-if="type != 'view'">
            <el-upload
              :action="uploadUrl"
              name="attaches"
              :headers="headers"
              :on-success="uploadSuccess"
              :show-file-list="false"
              multiple
              :file-list="fileList">
              <el-button type="primary">上 传</el-button>
            </el-upload>
          </div>
        </div>
        <el-table :data="fileList" 
          v-loading="loading" 
          border
          highlight-current-row
          :header-cell-style="{ color: '#333',background: '#F6F7FC'}">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column label="附件名" prop="name" align="center" />
          <el-table-column label="操作" align="center" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button type="text" v-if="type != 'view'" @click="delDoc(scope.row,scope.$index)">删除</el-button>
              <el-button type="text" @click="download(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>

uploadUrl: process.env.VUE_APP_BASE_API + '/szdj-eval/evalTask/upload',
fileList: [], // 附件表格
headers: {},
mounted() {
    if(getToken() && getTokenType()) {
      let tokentype = getTokenType()
      tokentype = tokentype.slice(0,1).toUpperCase() + tokentype.slice(1)
      this.headers = {
        'Authorization':`${tokentype} ${getToken()}`
      }
    }
}

 // 下载附件
    download(row) {
      let params = {
        path: row.path,
        fileName: row.name
      }
      downloadFile(params).then(res => {
        var blob = new Blob([res])
        this.downloadFunc(blob, row.name)
      }).catch(err => {
        console.log(err)
      })
    },
    // 下载文件
    downloadFunc(blob, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
      } else {
        let a = document.createElement('a')
        a.download = fileName
        a.style.display = 'none'
        a.href = window.URL.createObjectURL(blob)
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
      }
    },
    //上传附件成功
    uploadSuccess(res) {
      let fileList = []
      if(res.retCode == 0) {
        if(res.data.length) {
          fileList = {
            name: res.data[0].name,
            path: res.data[0].url,
            url: this.downLoadUrl + res.data[0].url
          }
          this.fileList = this.fileList.concat(fileList)
          console.log(this.fileList,'fff')
        }
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
    },
    // 删除附件
    delDoc(row,index) {
      this.$confirm('确定删除该附件？','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        delFile({path: row.path}).then(res => {
          console.log(res,'delFile')
          if(res.retCode == 0) {
            this.$message.success(res.message)
            console.log()
            this.fileList.splice(index,1)
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {})
    },