fix: upload multi files with maxNumberofFiles (#247)

* fix: upload multi files with maxNumberofFiles * Create nervous-trains-knock.md
cycleccc · Oct 14, 2024 · c6fa96e · c6fa96e
1 parent a0e71ec
commit c6fa96e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 24 deletions.
diff --git a/.changeset/nervous-trains-knock.md b/.changeset/nervous-trains-knock.md
@@ -0,0 +1,6 @@
+---
+"@wangeditor-next/upload-image-module": patch
+"@wangeditor-next/video-module": patch
+---
+
+fix: upload multi files with maxNumberofFiles
diff --git a/packages/editor/examples/upload-image.html b/packages/editor/examples/upload-image.html
@@ -16,7 +16,7 @@
     Upload image
   </p>
   <p>
-    本地下载、启动 <a href="https://github.com/wangeditor-team/server" target="_blank">server</a> 服务端
+    本地下载、启动 <a href="https://github.com/cycleccc/server" target="_blank">server</a> 服务端
     <code style="background-color: #f1f1f1;">http://127.0.0.1:3000/api/upload-img</code>
   </p>
 
@@ -50,6 +50,7 @@
       headers: { Accept: 'text/x-json' },
 
       maxFileSize: 10 * 1024 * 1024, // 10M
+      // maxNumberOfFiles: 2,
 
       base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
 
@@ -120,4 +121,4 @@
   </script>
 </body>
 
-</html>
+</html>
diff --git a/packages/upload-image-module/__tests__/upload-files.test.ts b/packages/upload-image-module/__tests__/upload-files.test.ts
@@ -58,6 +58,7 @@ describe('Upload image menu upload files util', () => {
     const fn = vi.fn().mockImplementation(() => ({
       // 这里需要返回一个 duck 类型的 uppy 对象，防止后面代码执行报错
       addFile: vi.fn(),
+      addFiles: vi.fn(),
       upload: vi.fn(),
     }) as any)
     const editor = createEditor()

diff --git a/packages/upload-image-module/src/module/upload-images.ts b/packages/upload-image-module/src/module/upload-images.ts
@@ -127,17 +127,16 @@ async function insertBase64(editor: IDomEditor, file: File) {
  * @param editor editor
  * @param file file
  */
-async function uploadFile(editor: IDomEditor, file: File) {
+async function uploadFile(editor: IDomEditor, files: File[]) {
   const uppy = getUppy(editor)
-
-  const { name, type, size } = file
-
-  uppy.addFile({
-    name,
-    type,
-    size,
+  const uploadList = files.map(file => ({
+    name: file.name,
+    type: file.type,
+    size: file.size,
     data: file,
-  })
+  }))
+
+  uppy.addFiles(uploadList)
   await uppy.upload()
 }
 
@@ -153,7 +152,9 @@ export default async function (editor: IDomEditor, files: FileList | null) {
   // 获取菜单配置
   const { customUpload, base64LimitSize } = getMenuConfig(editor)
 
+  const uploadFileList : File[] = []
   // 按顺序上传
+
   for await (const file of fileList) {
     const size = file.size // size kb
 
@@ -165,8 +166,9 @@ export default async function (editor: IDomEditor, files: FileList | null) {
       await customUpload(file, (src, alt, href) => insertImageNode(editor, src, alt, href))
     } else {
       // 默认上传
-      await uploadFile(editor, file)
+      uploadFileList.push(file)
     }
   }
-
+  // 默认上传
+  if (uploadFileList.length > 0) { await uploadFile(editor, uploadFileList) }
 }
diff --git a/packages/video-module/src/module/helper/upload-videos.ts b/packages/video-module/src/module/helper/upload-videos.ts
@@ -93,24 +93,24 @@ function getUppy(editor: IDomEditor): Uppy {
  * @param editor editor
  * @param file file
  */
-async function uploadFile(editor: IDomEditor, file: File) {
+async function uploadFile(editor: IDomEditor, files: File[]) {
   const uppy = getUppy(editor)
-
-  const { name, type, size } = file
-
-  uppy.addFile({
-    name,
-    type,
-    size,
+  const uploadList = files.map(file => ({
+    name: file.name,
+    type: file.type,
+    size: file.size,
     data: file,
-  })
+  }))
+
+  uppy.addFiles(uploadList)
   await uppy.upload()
 }
 
 export default async function (editor: IDomEditor, files: FileList | null) {
   if (files == null) { return }
   const fileList = Array.prototype.slice.call(files)
 
+  const uploadFileList : File[] = []
   // 获取菜单配置
   const { customUpload } = getMenuConfig(editor)
 
@@ -121,8 +121,9 @@ export default async function (editor: IDomEditor, files: FileList | null) {
       // 自定义上传
       await customUpload(file, (src, poster) => insertVideo(editor, src, poster))
     } else {
-      // 默认上传
-      await uploadFile(editor, file)
+      uploadFileList.push(file)
     }
   }
+  // 默认上传
+  if (uploadFileList.length > 0) { await uploadFile(editor, uploadFileList) }
 }