cofortest-frontend/src/components/file/FileUpload.vue

<template>
  <el-upload
    drag
    class="upload-file"
    :action="uploadUrl"
    :on-success="handleUploadSuccess"
    multiple
    :limit="countLimit"
    :on-exceed="handleExceed"
    :before-upload="beforeFileUpload"
    :on-remove="handleFileRemove"
    :file-list="fileList"
    :on-error="fileUploadError"
    :disabled="disabled"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
  </el-upload>
</template>

<script>
import Apis from '@/js/api.js'

export default {
  name: 'FileUpload',

  data: function () {
    return {
      fileList: [],
      uploadUrl: process.env.API_ROOT + Apis.FILE.UPLOAD_TEST_CASE_FILE
    }
  },
  props: {
    countLimit: {
      type: Number,
      default: 1
    },
    files: Array,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    files: {
      immediate: true,
      handler: function () {
        if (this.files.length !== this.fileList.length) {
          this.fileList = []
          this.files.map(file => {
            let fileName = file.substring(file.lastIndexOf('/') + 1)
            fileName = fileName.substring(0, fileName.lastIndexOf('_', fileName.lastIndexOf('_') - 1)) + fileName.substring(fileName.lastIndexOf('.'))
            this.fileList.push({ name: fileName, url: file })
          })
        }
      }
    }
  },
  methods: {
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.countLimit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeFileUpload (file) {
      console.log(file)
      const isPDF = file.type === 'application/pdf'
      const isDOC = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      const isEXCEL = file.type === 'application/vnd.ms-excel'
      const isXLS = file.type === 'application/x-xls'
      const isTXT = file.type === 'text/plain'
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!(isDOC || isEXCEL || isPDF || isTXT || isXLS || isXLSX)) {
        this.$message.error('上传文件只能是 PDF 、 DOC 、DOCX 、XLS、TXT、XLSX 格式!')
      }
      return isDOC || isEXCEL || isPDF || isTXT || isXLS || isXLSX
    },
    handleUploadSuccess (response, file, fileList) {
      // 这两个的顺序不能换
      this.fileList.push(file)
      this.files.push(response)
    },
    fileUploadError (err, file, fileList) { // 文件上传失败调用
      console.log(err)
      this.$message.error('上传文件失败!')
    },
    handleFileRemove (file) {
      console.log(this.fileList)
      for (const i in this.fileList) {
        if (this.fileList[i].uid === file.uid) {
          // 这两个的顺序不能换
          this.fileList.splice(i, 1)
          this.files.splice(i, 1)
        }
      }
      console.log(this.files)
    }
  }
}
</script>

<style scoped>
  .upload-file {
    width: 400px;
  }
</style>