若依 3.8.8

RuoYi

2024-06-30 99e66bf11c38ebe2f21f73b956918468eae4929c

 ruoyi-ui/src/components/ImageUpload/index.vue

@@ -1,6 +1,7 @@
<template>

  <div class="component-upload-image">

    <el-upload

      multiple

      :action="uploadImgUrl"

      list-type="picture-card"

      :on-success="handleUploadSuccess"

@@ -8,8 +9,8 @@
      :limit="limit"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      name="file"

      :on-remove="handleRemove"

      ref="imageUpload"

      :on-remove="handleDelete"

      :show-file-list="true"

      :headers="headers"

      :file-list="fileList"

@@ -18,7 +19,7 @@
    >

      <i class="el-icon-plus"></i>

    </el-upload>

    


    <!-- 上传提示 -->

    <div class="el-upload__tip" slot="tip" v-if="showTip">

      请上传

@@ -70,6 +71,8 @@
  },

  data() {

    return {

      number: 0,

      uploadList: [],

      dialogImageUrl: "",

      dialogVisible: false,

      hideUpload: false,

@@ -114,18 +117,6 @@
    },

  },

  methods: {

    // 删除图片

    handleRemove(file, fileList) {

      const findex = this.fileList.map(f => f.name).indexOf(file.name);

      this.fileList.splice(findex, 1);

      this.$emit("input", this.listToString(this.fileList));

    },

    // 上传成功回调

    handleUploadSuccess(res) {

      this.fileList.push({ name: res.fileName, url: res.fileName });

      this.$emit("input", this.listToString(this.fileList));

      this.loading.close();

    },

    // 上传前loading加载

    handleBeforeUpload(file) {

      let isImg = false;

@@ -144,35 +135,58 @@
      }



      if (!isImg) {

        this.$message.error(

          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`

        );

        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);

        return false;

      }

      if (this.fileSize) {

        const isLt = file.size / 1024 / 1024 < this.fileSize;

        if (!isLt) {

          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);

          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);

          return false;

        }

      }

      this.loading = this.$loading({

        lock: true,

        text: "上传中",

        background: "rgba(0, 0, 0, 0.7)",

      });

      this.$modal.loading("正在上传图片，请稍候...");

      this.number++;

    },

    // 文件个数超出

    handleExceed() {

      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);

      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);

    },

    // 上传成功回调

    handleUploadSuccess(res, file) {

      if (res.code === 200) {

        this.uploadList.push({ name: res.fileName, url: res.fileName });

        this.uploadedSuccessfully();

      } else {

        this.number--;

        this.$modal.closeLoading();

        this.$modal.msgError(res.msg);

        this.$refs.imageUpload.handleRemove(file);

        this.uploadedSuccessfully();

      }

    },

    // 删除图片

    handleDelete(file) {

      const findex = this.fileList.map(f => f.name).indexOf(file.name);

      if (findex > -1) {

        this.fileList.splice(findex, 1);

        this.$emit("input", this.listToString(this.fileList));

      }

    },

    // 上传失败

    handleUploadError() {

      this.$message({

        type: "error",

        message: "上传失败",

      });

      this.loading.close();

      this.$modal.msgError("上传图片失败，请重试");

      this.$modal.closeLoading();

    },

    // 上传结束处理

    uploadedSuccessfully() {

      if (this.number > 0 && this.uploadList.length === this.number) {

        this.fileList = this.fileList.concat(this.uploadList);

        this.uploadList = [];

        this.number = 0;

        this.$emit("input", this.listToString(this.fileList));

        this.$modal.closeLoading();

      }

    },

    // 预览

    handlePictureCardPreview(file) {

@@ -184,7 +198,9 @@
      let strs = "";

      separator = separator || ",";

      for (let i in list) {

        strs += list[i].url.replace(this.baseUrl, "") + separator;

        if (list[i].url) {

          strs += list[i].url.replace(this.baseUrl, "") + separator;

        }

      }

      return strs != '' ? strs.substr(0, strs.length - 1) : '';

    }

@@ -203,8 +219,8 @@
}



::v-deep .el-list-enter, .el-list-leave-active {

    opacity: 0;

    transform: translateY(0);

  opacity: 0;

  transform: translateY(0);

}

</style>