zfire-newmall-admin/src/components/file-upload/index.vue

<template>
  <div>
    <el-upload
      name="file"
      :class="['uploader', uid]"
      :action="oss_url"
      :data="dataObj"
      :multiple="multiple"
      :accept="accept"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload"
    />
    <div class="images" v-if="modType === 'view'">
      <div v-for="(item, index) in files" :key="index" class="item">
        <div v-if="item.url" class="img">
          <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" />
              <img v-if="checkFileType(item.url) == 'file'" class="file" src="@/assets/common/zip.jpeg" />
            </div>
          </el-image>
          <div v-if="isEdit || checkFileType(item.url) == 'image'" class="mask">
            <i v-if="checkFileType(item.url) == 'image'" class="el-icon-zoom-in" @click="previewImage(item.url)" />
            <i v-if="isEdit" class="el-icon-upload2" @click="uploadImage(item.url)" />
            <i v-if="isEdit" class="el-icon-delete" @click="deleteImage(item.url)" />
          </div>
        </div>
      </div>
      <template v-if="isEdit">
        <div v-if="limit">
          <div v-if="limit !== files.length" class="add" @click="uploadImage()">
            <i class="el-icon-plus" />
          </div>
        </div>
        <div v-else>
          <div v-if="multiple || (!multiple && files.length < 1)" class="add" @click="uploadImage()">
            <i class="el-icon-plus" />
          </div>
        </div>
      </template>
    </div>
    <div v-if="modType === 'btn'">
      <el-button size="mini" type="primary" @click="uploadImage()">上传</el-button>
    </div>
  </div>
</template>
<script>
import { getOssConfig } from '@/api/common'
import { findElem } from '@/utils/util'

export default {
  name: 'FileUpload',
  props: {
    modType: {
      type: String,
      default: 'view'
    },
    uid: {
      type: String,
      default: 'uidImgfile'
    },
    // 最大上传数量
    limit: {
      type: Number,
      default: 1
    },
    // 接受上传的文件列表
    fileList: {
      type: Array,
      default: () => []
    },
    // 接受上传的文件类型
    fileType: {
      type: Array,
      default: () => ['image', 'word', 'excel', 'ppt', 'pdf', 'file']
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: false
    },
    startRestricting: {
      type: Boolean,
      default: false
    },
    restrictFilename: {
      type: Array,
      default: () => {
        return []
      }
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      imageURL: this.$imageUrl,
      oss_url: '',
      dataObj: {},
      uploadImageUrl: '',
      waitUploadList: [],
      fileName: '',
      files: this.fileList
    }
  },
  computed: {
    isShowFileList: {
      get: function () {
        if (this.files.length > 0 && this.files[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']
      const fileList = ['.zip', '.rar', '.gz', '.apk']
      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))
      this.fileType.includes('file') && (whiteList = whiteList.concat(fileList))
      return whiteList.join(',')
    },
    previewImages() {
      const fileList = []
      if (this.files && this.files.length > 0) {
        this.files.forEach(item => {
          if (this.checkFileType(item.url) == 'image') {
            fileList.push(this.imageURL + item.url)
          }
        })
      }
      return fileList
    }
  },
  watch: {
    files() {
      if (this.isEdit) {
        this.$emit('getFiles', this.files)
      }
    },
    fileList() {
      this.files = this.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 if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
        return 'file'
      }
    },
    // 获取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.files, 'url', url)
      this.$refs.img[index].showViewer = true
    },
    // 删除图片
    deleteImage(url) {
      const index = findElem(this.files, 'url', url)
      this.files.splice(index, 1)
    },
    // 点击上传
    uploadImage(url) {
      this.uploadImageUrl = url
      document.querySelector(`.${this.uid}` + ' 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.getFileName(file.name)
      this.$emit('handleIsFileName', this.fileName)
      this.dataObj = await this.getOssConfig(this.fileName)
      this.waitUploadList.push(this.dataObj)
    },
    // 文件上传成功
    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.files, 'url', this.uploadImageUrl)
        this.$set(this.files, index, {
          name: this.dataObj.name,
          url: this.dataObj.key
        })
        this.waitUploadList = []
      } else {
        this.getFileName(file.name)
        const index = findElem(this.waitUploadList, 'name', this.fileName)
        this.files.push({
          name: this.waitUploadList[index].name,
          url: this.waitUploadList[index].key
        })
        this.waitUploadList.splice(index, 1)
      }
      this.showFileList = true
      loading.close()
    },
    getFileName(name) {
      const fileName = name.substring(0, name.lastIndexOf('.'))
      let suffix = name.match(/.[^.]+$/)[0]
      // 押金申请上传限制
      this.fileName = name
      if (this.startRestricting) {
        // 检查是否存在相应文字，否filterKeywords.length = 0
        const filterKeywords = this.restrictFilename.filter(k => fileName.includes(k))
        // filterKeywords = 0 || 'zip', 'rar', 'gz', 'apk' 归为 其他文件
        if (!filterKeywords.length || suffix.includes('zip', 'rar', 'gz', 'apk')) {
          this.fileName = `其他文件-${fileName}${suffix}`
        }
        // 限制照片/相片名称统一为照片 ， restrictFilename[restrictFilename.length-1|restrictFilename.length-1]为照片、相片
        if (fileName.includes('相片') || fileName.includes('照片')) {
          this.fileName = `照片-${fileName}${suffix}`
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.images {
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-right: 20px;
    margin-bottom: 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: none;
        align-items: center;
        justify-content: center;
        i {
          font-size: 20px;
          color: #ffffff;
          cursor: pointer;
          margin: 0 8px;
        }
      }
      &:hover .mask {
        display: flex;
      }
    }
  }
  .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>