supply-front/src/components/Common/file-upload.vue

<template>
  <div>
    <el-upload
      :action="oss_url"
      :data="dataObj"
      :multiple="multiple"
      :show-file-list="isShowFileList"
      :file-list="fileList"
      :limit="limit"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
    >
      <el-button :size="size" type="primary">{{
        multiple ? '点击上传' : fileList.length == 0 ? '点击上传' : '重新上传'
      }}</el-button>
    </el-upload>
  </div>
</template>
<script>
import { getOssConfig } from '@/api/common'

export default {
  name: 'FileUpload',
  props: {
    fileList: Array,
    multiple: {
      type: Boolean,
      default: false
    },
    fileType: {
      type: Array,
      default: () => ['image', 'video', 'word', 'excel', 'ppt', 'pdf']
    },
    size: {
      type: String,
      default: 'small'
    },
    limit: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      oss_url: '',
      dataObj: {},
      aliosstoken: '',
      flag: false
    }
  },
  computed: {
    isShowFileList: {
      get: function() {
        if (!this.multiple) {
          if (this.fileList.length > 0 && this.fileList[0].url) {
            return true
          } else {
            return false
          }
        }
      },
      set: function(newValue) {}
    }
  },
  created() {
    getOssConfig().then(res => {
      this.oss_url = res.data.host
      this.dataObj = res.data
    })
  },
  methods: {
    getUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
      })
    },
    createName(name) {
      console.log(444)
      const date = Date.now()
      const uuid = this.getUUID()
      const fileSuffix = name.substring(name.lastIndexOf('.') + 1)
      return `${date}${uuid}.${fileSuffix}`
    },

    handleRemove(file, fileList) {
      if (!this.flag) {
        fileList.pop()
        this.fileList.pop()
      }
      this.flag = false

      // this.fileList = [{ name: '', url: '' }];
    },
    beforeUpload(file) {
      console.log(file, 999)
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const imgList = ['jpg', 'jpeg', 'png']
      const videoList = ['mp4']
      const wordList = ['doc', 'docx', 'dot', 'wps', 'wpt']
      const excelList = ['xls', 'xlsx', 'xlt', 'et', 'ett']
      const pptList = ['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps']
      const pdfList = ['pdf']

      let whiteList = []
      if (this.fileType.includes('image')) {
        whiteList = whiteList.concat(imgList)
      }
      if (this.fileType.includes('video')) {
        whiteList = whiteList.concat(videoList)
      }
      if (this.fileType.includes('word')) {
        whiteList = whiteList.concat(wordList)
      }
      if (this.fileType.includes('excel')) {
        whiteList = whiteList.concat(excelList)
      }
      if (this.fileType.includes('ppt')) {
        whiteList = whiteList.concat(pptList)
      }
      if (this.fileType.includes('pdf')) {
        whiteList = whiteList.concat(pdfList)
      }
      console.log(whiteList.indexOf(fileSuffix))
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传' + this.fileType.join(',') + '文件!')
        this.flag = true

        return false
      } else {
        const fileName = this.createName(file.name)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        this.dataObj.key = this.dataObj.dir + fileName
      }
    },
    handleUploadSuccess(res, file, fileList) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (!this.multiple) {
        this.fileList.pop()
      }
      console.log(4747)
      this.fileList.push({
        name: file.name,
        status: 'success',
        url: this.dataObj.key
      })

      this.showFileList = true
      loading.close()
    }
  }
}
</script>