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

<template>
  <div>
    <el-upload
      class="uploader"
      :action="oss_url"
      :data="dataObj"
      :multiple="multiple"
      name="file"
      :accept="accept"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload"
    />
    <div class="images">
      <div v-for="(item, index) in fileList" :key="index" class="item">
        <div v-if="item.url" class="img" @mouseover="item.hover = true;" @mouseout="item.hover = false;">
          <el-image v-if="checkFileType(item.url) == 'image'" ref="img" :src="imageURL + item.url" :preview-src-list="previewImages" style="width: 120px; height: 120px" fit="cover" />
          <el-image v-else ref="img" :src="imageURL + item.url" style="width: 120px; height: 120px" fit="cover">
            <div slot="error" class="image-slot">
              <img v-if="checkFileType(item.url) == 'word'" class="file" src="@/assets/common/word.png">
              <img v-if="checkFileType(item.url) == 'excel'" class="file" src="@/assets/common/excel.png">
              <img v-if="checkFileType(item.url) == 'ppt'" class="file" src="@/assets/common/ppt.png">
              <img v-if="checkFileType(item.url) == 'pdf'" class="file" src="@/assets/common/pdf.png">
            </div>
          </el-image>
          <div v-show="item.hover" class="mask">
            <i v-if="checkFileType(item.url) == 'image'" class="el-icon-zoom-in" @click="previewImage(item.url)" />
            <i class="el-icon-upload2" @click="uploadImage(item.url)" />
            <i class="el-icon-delete" @click="deleteImage(item.url)" />
          </div>
        </div>
      </div>
      <div v-if="multiple || (!multiple && fileList.length < 1)" class="add" @click="uploadImage()"><i class="el-icon-plus" /></div>
    </div>
  </div>
</template>
<script>
import { getOssConfig } from '@/api/common'
import { findElem } from '@/utils/util'

export default {
  name: 'FileUpload',
  props: {
    // 接受上传的文件列表
    fileList: Array,

    // 接受上传的文件类型
    fileType: {
      type: Array,
      default: () => ['image', 'word', 'excel', 'ppt', 'pdf']
    },

    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: false
    },
    startRestricting: {
      type: Boolean,
      default: false
    },
    restrictFilename: {
      type: Array,
      default:()=>{
        return  []
      }
    }

  },
  data() {
    return {
      imageURL: this.$imageUrl,
      oss_url: '',
      dataObj: {},
      uploadImageUrl: '',
      waitUploadList: []
    }
  },
  computed: {
    isShowFileList: {
      get: function() {
        if (this.fileList.length > 0 && this.fileList[0].url) {
          return true
        } else {
          return false
        }
      },
      set: function(newValue) {}
    },
    accept() {
      const imageList = ['.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 = []
      this.fileType.includes('image') && (whiteList = whiteList.concat(imageList))
      this.fileType.includes('video') && (whiteList = whiteList.concat(videoList))
      this.fileType.includes('word') && (whiteList = whiteList.concat(wordList))
      this.fileType.includes('excel') && (whiteList = whiteList.concat(excelList))
      this.fileType.includes('ppt') && (whiteList = whiteList.concat(pptList))
      this.fileType.includes('pdf') && (whiteList = whiteList.concat(pdfList))
      return whiteList.join(',')
    },
    previewImages() {
      const fileList = []
      if (this.fileList && this.fileList.length > 0) {
        this.fileList.forEach(item => {
          if (this.checkFileType(item.url) == 'image') {
            fileList.push(this.imageURL + item.url)
          }
        })
      }
      return fileList
    }
  },
  created() {
    getOssConfig().then(res => {
      this.oss_url = res.data.host
    })
  },
  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) {
      const date = Date.now()
      const uuid = this.getUUID()
      const fileSuffix = name.substring(name.lastIndexOf('.') + 1)
      return `${date}${uuid}.${fileSuffix}`
    },

    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else {
        return ''
      }
    },

    // 获取oss配置
    async getOssConfig(fileName) {
      const result = await new Promise((resolve, reject) => {
        getOssConfig().then(res => {
          const fileKey = this.createName(fileName)
          res.data.name = fileName
          res.data.key = res.data.dir + fileKey
          resolve(res.data)
        }).catch(res => {
          resolve({})
        })
      })
      return result
    },

    // 预览图片
    previewImage(url) {
      const index = findElem(this.fileList, 'url', url)
      this.$refs.img[index].showViewer = true
    },

    // 删除图片
    deleteImage(url) {
      const index = findElem(this.fileList, 'url', url)
      this.fileList.splice(index, 1)
    },

    // 点击上传
    uploadImage(url) {
      this.uploadImageUrl = url
      document.querySelector('.uploader input').click()
    },

    // 上传文件之前
    async beforeUpload(file) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$emit('handleIsFileName', file.name)
      this.dataObj = await this.getOssConfig(file.name)
      this.waitUploadList.push(this.dataObj)
      if (this.startRestricting) {
        if (!this.restrictFilename.includes(file.name.split('.')[0])) {
          this.$errorMsg('请根据固定文件名称上传：' + this.restrictFilename.join())
          loading.close()
          return Promise.reject()
        }
      }
    },

    // 文件上传成功
    uploadSuccess(res, file) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.uploadImageUrl) {
        const index = findElem(this.fileList, 'url', this.uploadImageUrl)
        this.$set(this.fileList, index, {
          name: this.dataObj.name,
          url: this.dataObj.key,
          hover: false
        })
        this.waitUploadList = []
      } else {
        const index = findElem(this.waitUploadList, 'name', file.name)

        if (this.startRestricting) {
          if (this.fileList.length) {
            this.fileList.forEach(k => {
              if (k.name.split('.')[0] === file.name.split('.')[0]) {
                k.name = this.waitUploadList[index].name
                k.url = this.waitUploadList[index].key
                k.hover = false
                this.waitUploadList.splice(index, 1)
                this.showFileList = true
                loading.close()
              }
            })
            return false
          }
        }
        this.fileList.push({
          name: this.waitUploadList[index].name,
          url: this.waitUploadList[index].key,
          hover: false
        })
        this.waitUploadList.splice(index, 1)
      }
      this.showFileList = true
      loading.close()
    }
  }
}
</script>

<style scoped lang="scss">
	.images {
		display: flex;
		flex-wrap: wrap;
		.item {
			margin-right: 20px;
			.img {
				width: 120px;
				height: 120px;
				border-radius: 5px;
				overflow: hidden;
				position: relative;
				border: 1px dashed #eaeaea;
				display: flex;
				.el-image {
					display: block;
				}
				.file {
					width: 120px;
					height: 120px;
					display: block;
					padding: 30px;
				}
				.mask {
					position: absolute;
					left: 0;
					top: 0;
					width: 120px;
					height: 120px;
					background: rgba($color: #000000, $alpha: 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					i {
						font-size: 20px;
						color: #ffffff;
						cursor: pointer;
						margin: 0 8px;
					}
				}
			}
		}
		.add {
			width: 120px;
			height: 120px;
			border: 1px dashed #eaeaea;
			border-radius: 5px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			i {
				font-size: 30px;
				color: #999;
			}
		}
	}
	.uploader {
    height: 0;
  }
</style>