组件ImageUpload支持多图同时选择上传

RuoYi

2022-02-25 e62e8e372cf4368f139da191666d3e5e8c62e781

 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"

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

  data() {

    return {

      number: 0,

      uploadList: [],

      dialogImageUrl: "",

      dialogVisible: false,

      hideUpload: false,

@@ -117,14 +120,21 @@
    // 删除图片

    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));

      if(findex > -1) {

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

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

      if (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.loading.close();

      }

    },

    // 上传前loading加载

    handleBeforeUpload(file) {

@@ -161,6 +171,7 @@
        text: "上传中",

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

      });

      this.number++;

    },

    // 文件个数超出

    handleExceed() {

@@ -184,7 +195,7 @@
      let strs = "";

      separator = separator || ",";

      for (let i in list) {

        strs += list[i].url + separator;

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

      }

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

    }