优化

nginx/default.conf

 server {
   listen       80;
-  client_max_body_size   20m; 
+  client_max_body_size   100m; 
 
   #charset koi8-r;
   access_log  /var/log/nginx/host.access.log  main;

src/components/richTextEditor.vue

 <template>
   <div style="border: 1px solid #ccc">
     <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
-    <Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
+    <Editor style="height: 400px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
       @onCreated="handleCreated" @onChange="handleChange" />
   </div>
 </template>
@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
-import { onBeforeUnmount, ref, shallowRef, computed } from 'vue'
+import { onBeforeUnmount, shallowRef, computed } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { createStorage } from "@/services/api/storage";
 

src/views/commodityManage/edit.vue

@@ -57,9 +57,9 @@
                     </el-form-item>
 
                     <el-form-item label="宣传画廊">
-                        <el-upload v-model:file-list="fileList" :action="uploadPath" :limit="5" :headers="headers"
-                            :on-exceed="uploadOverrun" :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple
-                            accept=".jpg,.jpeg,.png,.gif" list-type="picture-card">
+                        <el-upload ref="uploadRef" v-model:file-list="fileList" :action="uploadPath" :limit="5"
+                            :headers="headers" :on-exceed="uploadOverrun" :on-success="handleGalleryUrl"
+                            :on-remove="handleRemove" multiple accept=".jpg,.jpeg,.png,.gif" list-type="picture-card">
                             <el-icon class="avatar-uploader-icon">
                                 <Plus />
                             </el-icon>
@@ -213,6 +213,7 @@ let categoryIds = ref([] as any);
 let categoryList = ref([] as any);
 let brandList = ref([] as any);
 let fileList = ref([] as any)
+let uploadRef = ref()
 let openEditor = ref(true) // 富文本在每次dialog关闭后都要销毁，所以可以用v-if销毁dom
 let goods = ref({
     goodsSn: "",
@@ -410,6 +411,7 @@ let handleCancel = () => {
         categoryId: undefined,
         keywords: undefined,
     }
+    uploadRef.value.clearFiles()
     specifications.value = []
     products.value = []
     goodsParts.value = []

src/views/commodityManage/shelves.vue

@@ -57,8 +57,8 @@
                     </el-form-item>
 
                     <el-form-item label="宣传画廊">
-                        <el-upload :action="uploadPath" :limit="5" :headers="headers" :on-exceed="uploadOverrun"
-                            :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple
+                        <el-upload ref="uploadRef" :action="uploadPath" :limit="5" :headers="headers"
+                            :on-exceed="uploadOverrun" :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple
                             accept=".jpg,.jpeg,.png,.gif" list-type="picture-card">
                             <el-icon class="avatar-uploader-icon">
                                 <Plus />
@@ -202,6 +202,7 @@ import richTextEditor from '@/components/richTextEditor.vue'
 let shelvesDrawer = ref(false)
 let newKeywordVisible = ref(false);
 let newKeyword = ref("");
+let uploadRef = ref();
 let keywords = ref([] as any);
 let categoryList = ref([] as any);
 let brandList = ref([] as any);
@@ -285,6 +286,7 @@ let handleCancel = () => {
         categoryId: undefined,
         keywords: undefined,
     }
+    uploadRef.value.clearFiles()
     specifications.value = []
     products.value = []
     goodsParts.value = []