处理商品详情富文本多张图片上传

src/components/Editor/wang.vue

@@ -1,144 +1,140 @@
-<template>  
-    <div>
-      <div  ref='editor1' class="myedit"></div>
-    </div> 
-</template>  
-  
-<script>  
-  import E from 'wangeditor'  
-  export default {  
-    name: 'editoritem',  
-    data() {  
-      return {
-        uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadWang",
-        editor: null
-      }  
-    },
-    created() {
-       
-      
+<template>
+  <div>
+    <div ref='editor1' class="myedit"></div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'editoritem',
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadWang",
+      editor: null,
+      selectedImageCount: 0, // 记录选择的图片数量
+      uploadedImageCount: 0  // 记录已上传的图片数量
+    }
+  },
+  beforeDestroy() {
+    if (this.editor != null) {
+      this.editor.destroy()
+      this.editor = null
+    }
+  },
+  methods: {
+    initEditor() {
+      const that = this;
+      if (this.editor == null) {
+        this.editor = new E(that.$refs.editor1)
+        this.editor.config.uploadImgServer = this.uploadUrl;
+        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
+        this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
+        this.editor.config.uploadFileName = 'fileName'
+        this.editor.config.zIndex = 1
+
+        // 关键配置：允许多选，串行上传
+        this.editor.config.uploadImgMultiple = true;
+        this.editor.config.uploadImgMaxLength = 5;
+        this.editor.config.uploadImgConcurrent = 1;
+
+        // 重写图片上传逻辑以获取选择的图片数量
+        this.editor.config.customUploadImg = function (files, insertImgFn) {
+          // 获取选择的图片数量
+          that.selectedImageCount = files.length;
+          that.uploadedImageCount = 0;
+          console.log(`已选择 ${that.selectedImageCount} 张图片，准备开始上传`);
+
+          that.$emit('image-selected', that.selectedImageCount);
+
+          const uploadNext = (index) => {
+            if (index >= files.length) {
+              console.log(`所有 ${files.length} 张图片上传处理完毕`);
+              that.$emit('all-images-uploaded', that.uploadedImageCount);
+              return;
+            }
+
+            const formData = new FormData();
+            formData.append(that.editor.config.uploadFileName, files[index]);
+
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', that.uploadUrl);
+
+            xhr.onload = function () {
+              if (xhr.status >= 200 && xhr.status < 300) {
+                const result = JSON.parse(xhr.responseText);
+                if (result.errno === 0 && result.data && result.data[0] && result.data[0].url) {
+                  insertImgFn(result.data[0].url);
+                  that.uploadedImageCount++;
+                  that.$emit('image-uploaded', that.uploadedImageCount, that.selectedImageCount);
+                } else {
+                  console.error(`第 ${index+1} 张图片上传失败:`, result);
+                  that.$emit('image-upload-error', index+1);
+                }
+              } else {
+                console.error(`第 ${index+1} 张图片上传请求失败:`, xhr.statusText);
+                that.$emit('image-upload-error', index+1);
+              }
+              uploadNext(index + 1);
+            };
+
+            xhr.onerror = function () {
+              console.error(`第 ${index+1} 张图片上传出错`);
+              that.$emit('image-upload-error', index+1);
+              uploadNext(index + 1);
+            };
+
+            // 发送请求
+            xhr.send(formData);
+          };
+
+          // 开始上传第一张
+          uploadNext(0);
+        };
+
+        this.editor.config.menus = [
+          'head', 'bold', 'fontSize', 'fontName', 'italic', 'underline',
+          'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor',
+          'link', 'list', 'todo', 'justify', 'quote', 'emoticon', 'image',
+          'table', 'code', 'splitLine', 'undo', 'redo'
+        ]
+
+        this.editor.config.onchange = function (newHtml) {
+          that.$emit("on-text-change", newHtml);
+        }
+
+        this.editor.config.pasteFilterStyle = false
+        this.editor.config.onchangeTimeout = 500
+
+        this.editor.create()
+      }
+      this.editor.txt.html("");
     },
-    beforeDestroy() {
-      // 销毁编辑器
-      if(this.editor!=null){
-        this.editor.destroy()
-        this.editor = null
+
+    setText(text) {
+      if (this.editor == null) {
+        this.initEditor()
       }
-      
+      this.editor.txt.html(text || "");
     },
-    methods:{
-      initEditor(){
-        var that=this;
-        if(this.editor==null){
-            //创建编辑器
-            this.editor = new E(that.$refs.editor1 )
-            this.editor.config.uploadImgServer = this.uploadUrl;
-            this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
-            this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
-            this.editor.config.uploadFileName = 'fileName'
-            this.editor.config.zIndex = 1
-            this.editor.config.menus = [
-              'head',
-              'bold',
-              'fontSize',
-              'fontName',
-              'italic',
-              'underline',
-              'strikeThrough',
-              'indent',
-              'lineHeight',
-              'foreColor',
-              'backColor',
-              'link',
-              'list',
-              'todo',
-              'justify',
-              'quote',
-              'emoticon',
-              'image',
-              // 'video',
-              'table',
-              'code',
-              'splitLine',
-              'undo',
-              'redo',
-          ]
-          this.editor.config.onchange = function (newHtml) {
-            console.log(newHtml)
-            that.$emit("on-text-change", newHtml);
-          }
-          this.editor.config.pasteFilterStyle = false
-          // 配置触发 onchange 的时间频率，默认为 200ms
-          this.editor.config.onchangeTimeout = 500 // 修改为 500ms
-            this.editor.config.uploadImgHooks = {
-                // 上传图片之前
-                before: function(xhr) {
-                    //console.log(xhr)
-                    
-                },
-                // 图片上传并返回了结果，图片插入已成功
-                success: function(xhr) {
-                    //console.log('success', xhr)
-                },
-                // 图片上传并返回了结果，但图片插入时出错了
-                fail: function(xhr, editor, resData) {
-                    console.log('fail', resData)
-                },
-                // 上传图片出错，一般为 http 请求的错误
-                error: function(xhr, editor, resData) {
-                    console.log('error', xhr, resData)
-                },
-                // 上传图片超时
-                timeout: function(xhr) {
-                    //console.log('timeout')
-                },
-                // 图片上传并返回了结果，想要自己把图片插入到编辑器中
-                // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
-                customInsert: function(insertImg, result, editor) {
-                      console.log(result);
-                      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
-                      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
-                      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
-                      var url =   result.data[0].url
-                      console.log(url);
-                      insertImg(url)
-                      // result 必须是一个 JSON 格式字符串！！！否则报错
-                }
-            }
-            this.editor.create()
-        }
-        this.editor.txt.html("");
-      },
-      setText(text){
-        if(this.editor==null){
-          this.initEditor()
-        }
-        if(text==undefined||text==null){
-          this.editor.txt.html("");
-        }
-        else{
-          this.editor.txt.html(text);
-        }
-        
-      },
-     }
-   
-  }  
-</script>  
-  
-<style scoped>
-.toolbar {
-  border: 1px solid #ccc;
+
+    getSelectedImageCount() {
+      return this.selectedImageCount;
+    },
+
+    getUploadedImageCount() {
+      return this.uploadedImageCount;
+    }
+  }
 }
+</script>
+
+<style scoped>
 .myedit {
   min-height: 300px;
   z-index: 1 !important;
 }
-.w-e-toolbar{
-  z-index: 1 !important;
-}
-.w-e-text-container{
+.w-e-toolbar, .w-e-text-container {
   z-index: 1 !important;
 }
- 
-</style>
+</style>