商品详情，多图片上传

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 {
-    props: {
-      description: {
-        type: String,
-        required: true
-      }
+import E from "wangeditor";
+import { UploadImg } from "@/api/module/goods";
+export default {
+  props: {
+    description: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        editor: null
-      }
-    },
-    mounted() {
-      let that = this
-      // 富文本编辑器
-      const editor = new E('#wangeditor')
-      editor.config.height = 500
-      editor.config.uploadImgMaxLength = 1
-      editor.config.customUploadImg = function (resultFiles, insertImgFn) {
-        // resultFiles 是 input 中选中的文件列表
-        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-
-        that.getBase64(resultFiles[0]).then((res) => {
-          let result = res.split(",")
-          let Base64img = result[1]
+  },
+  data() {
+    return {
+      allImg: [],
+      editor: null,
+    };
+  },
+  mounted() {
+    let that = this;
+    // 富文本编辑器
+    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.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 });
+            }
+          }
 
-          // 上传图片，返回结果，将图片插入到编辑器中
-          let data = {"img_data": Base64img}
-          UploadImg(data).then(res => {
+          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
+      // });
+    };
 
-      if( this.description ) {
-        this.editor.txt.html(this.description)
-      }
-    },
-    methods: {
-      initInfo() {
-        this.editor = null
-      },
-      getBase64(file) {
-        return new Promise(function (resolve, reject) {
-          let reader = new FileReader();
-          let imgResult = "";
-          reader.readAsDataURL(file);
-          reader.onload = function () {
-            imgResult = reader.result;
-          };
-          reader.onerror = function (error) {
-            reject(error);
-          };
-          reader.onloadend = function () {
-            resolve(imgResult);
-          };
-        });
-      },
+    editor.create();
+    this.editor = editor;
+
+    if (this.description) {
+      this.editor.txt.html(this.description);
     }
-  }
+  },
+  methods: {
+    initInfo() {
+      this.editor = null;
+    },
+    getBase64(file) {
+      return new Promise(function (resolve, reject) {
+        let reader = new FileReader();
+        let imgResult = "";
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+          imgResult = reader.result;
+        };
+        reader.onerror = function (error) {
+          reject(error);
+        };
+        reader.onloadend = function () {
+          resolve(imgResult);
+        };
+      });
+    },
+    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 {
-    padding: 20px;
-  }
-  /deep/ .w-e-text-container {
-    z-index: 1000!important;
-  }
-  /deep/ .w-e-toolbar {
-    z-index: 1001!important;
-  }
+.goods-img {
+  padding: 20px;
+}
+/deep/ .w-e-text-container {
+  z-index: 1000 !important;
+}
+/deep/ .w-e-toolbar {
+  z-index: 1001 !important;
+}
 </style>