优化图片上传新增加可以上传多张图

ZR.Vue/src/components/UploadImage/index.vue

@@ -1,10 +1,21 @@
 <template>
   <div class="component-upload-image">
-    <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError" name="file"
-      :show-file-list="false" :headers="headers" style="display: inline-block; vertical-align: top">
-      <el-image v-if="imageUrl" :src="imageUrl" class="icon" />
-      <i v-else class="el-icon-plus uploader-icon"></i>
+    <el-upload list-type="picture-card" :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
+      :on-exceed="handleExceed" :on-remove="handleRemove" :on-error="handleUploadError" name="file" :show-file-list="true" :limit="limit"
+      :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{hide: this.fileList.length >= this.limit}" :headers="headers">
+      <i class="el-icon-plus"></i>
+
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        的文件
+      </div>
     </el-upload>
+    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
+      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+    </el-dialog>
   </div>
 </template>
 
@@ -14,6 +25,11 @@ import { getToken } from "@/utils/auth";
 export default {
   props: {
     value: [String],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
     column: [String],
     // 上传地址
     uploadUrl: {
@@ -32,14 +48,23 @@ export default {
     },
     //显示手动输入地址
     showInput: false,
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
       uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
       imageUrl: "",
+      fileList: [],
     };
   },
   watch: {
@@ -49,22 +74,49 @@ export default {
       deep: true,
       handler: function (val) {
         if (val) {
-          this.imageUrl = val;
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(",");
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === "string") {
+              // if (item.indexOf(this.baseUrl) === -1) {
+              //     item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              // } else {
+              item = { name: item, url: item };
+              // }
+            }
+            return item;
+          });
         } else {
-          this.imageUrl = "";
+          this.fileList = [];
+          return [];
         }
       },
     },
   },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
   methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name);
+      if (findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.column, this.listToString(this.fileList));
+      }
+    },
+    //上传成功回调
     handleUploadSuccess(res) {
-      this.$emit(`input`, res, this.column);
-      this.imageUrl = res.data;
+      this.fileList.push({ name: res.data.fileName, url: res.data.url });
+      this.$emit(`input`, this.column, this.listToString(this.fileList));
       this.loading.close();
     },
     // 上传前loading加载
     handleBeforeUpload(file) {
-      console.log(file);
       let isImg = false;
       if (this.fileType.length) {
         let fileExtension = "";
@@ -99,6 +151,24 @@ export default {
         background: "rgba(0, 0, 0, 0.7)",
       });
     },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    },
     handleUploadError() {
       this.$message({
         type: "error",
@@ -111,8 +181,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.avatar {
-  width: 100%;
-  height: 100%;
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
 }
 </style>