商品详情，多图片上传

src/views/system/goods/add/components/goodsimg2.vue

 <template>
   <div class="goods-img">
-    <div id="wangeditor" ref="editorElem">
-    </div>
+    <div id="wangeditor" ref="editorElem"></div>
   </div>
 </template>
 
 <script>
-  import E from 'wangeditor'
-  import { UploadImg } from '@/api/module/goods'
-  export default {
+import E from "wangeditor";
+import { UploadImg } from "@/api/module/goods";
+export default {
   props: {
     description: {
       type: String,
-        required: true
-      }
+      required: true,
+    },
   },
   data() {
     return {
-        editor: null
-      }
+      allImg: [],
+      editor: null,
+    };
   },
   mounted() {
-      let that = this
+    let that = this;
     // 富文本编辑器
-      const editor = new E('#wangeditor')
-      editor.config.height = 500
-      editor.config.uploadImgMaxLength = 1
-      editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+    const editor = new E("#wangeditor");
+    editor.config.height = 500;
+    editor.config.uploadImgShowBase64 = true;
+    editor.config.showLinkImg = false;
+    // editor.config.uploadImgMaxLength = 1
+    editor.config.customUploadImg = function (files, insertImgFn) {
       // resultFiles 是 input 中选中的文件列表
       // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-
-        that.getBase64(resultFiles[0]).then((res) => {
-          let result = res.split(",")
-          let Base64img = result[1]
-
       // 上传图片，返回结果，将图片插入到编辑器中
-          let data = {"img_data": Base64img}
-          UploadImg(data).then(res => {
+      that.getAllImg(files).then((res) => {
+        let data = { data: [] };
+        let imgBase = "";
+        if (res.length > 0) {
+          for (let i = 0; i < res.length; i++) {
+            imgBase = "";
+            imgBase = res[i].split(",")[1];
+            if (imgBase) {
+              data.data.push({ img_data: imgBase });
+            }
+          }
+
+          UploadImg(data).then((res) => {
             if (res.code == 1) {
-              insertImgFn(res.data.image_url)
+              if (
+                res.code == 1 &&
+                Array.isArray(res.data) &&
+                res.data.length > 0
+              ) {
+                for (let i = 0; i < res.data.length; i++) {
+                  if (res.data[i].image_url) {
+                    insertImgFn(res.data[i].image_url);
                   }
-          })
-        })
                 }
+              }
+            }
+          });
+        } // res.length > 0 end
+      });
+
+      // });
+    };
 
-      editor.create()
-      this.editor = editor
+    editor.create();
+    this.editor = editor;
 
-      if( this.description ) {
-        this.editor.txt.html(this.description)
+    if (this.description) {
+      this.editor.txt.html(this.description);
     }
   },
   methods: {
     initInfo() {
-        this.editor = null
+      this.editor = null;
     },
     getBase64(file) {
       return new Promise(function (resolve, reject) {
@@ -71,18 +92,33 @@
         };
       });
     },
-    }
-  }
+    async getAllImg(files) {
+      let imgObj = { img_data: "" };
+      let res = [];
+      let orgRes = "";
+
+      files.forEach((item) => {
+        res.push(
+          (async (item) => {
+            return await this.getBase64(item);
+          })(item)
+        );
+      });
+
+      return await Promise.all(res);
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .goods-img {
+.goods-img {
   padding: 20px;
-  }
-  /deep/ .w-e-text-container {
-    z-index: 1000!important;
-  }
-  /deep/ .w-e-toolbar {
-    z-index: 1001!important;
-  }
+}
+/deep/ .w-e-text-container {
+  z-index: 1000 !important;
+}
+/deep/ .w-e-toolbar {
+  z-index: 1001 !important;
+}
 </style>