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"
              />
              <img
                v-if="checkFileType(item.url) == 'file'"
                class="file"
                src="@/assets/common/zip.jpeg"
              />
            </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", "file"],
    },

    // 是否支持多选文件
    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: [],
      fileName: "",
    };
  },
  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"];
      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.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 if (["zip", "rar", "gz", "apk"].includes(fileSuffix)) {
        return "file";
      }
      {
        return "pdf";
      }
    },

    // 获取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.getFileName(file.name);
      this.$emit("handleIsFileName", this.fileName);
      this.dataObj = await this.getOssConfig(this.fileName);
      console.log(this.dataObj, "ppp");
      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.fileList, "url", this.uploadImageUrl);
        this.$set(this.fileList, index, {
          name: this.dataObj.name,
          url: this.dataObj.key,
          hover: false,
        });
        this.waitUploadList = [];
      } else {
        this.getFileName(file.name);
        const index = findElem(this.waitUploadList, "name", this.fileName);

        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();
    },

    getFileName(name) {
      const fileName = name.substring(0, name.lastIndexOf("."));
      let suffix = name.match(/.[^.]+$/)[0];
      console.log(suffix, fileName);
      // 押金申请上传限制
      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 = `其他文件${suffix}`;
        }
        // 限制照片/相片名称统一为照片 ， restrictFilename[restrictFilename.length-1|restrictFilename.length-1]为照片、相片
        if (fileName.includes("相片") || fileName.includes("照片")) {
          this.fileName = `照片${suffix}`;
        }
      }
    },
  },
};
</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>