fix(upload): multiple list incorrect (#1125)

* fix(upload): mutiple list incorrect * update changelog * optimize * update changelog * fix: test failed * feat: optimization Co-authored-by: Jiwen Bai <56228105@qq.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Sep 18, 2021 · 38cab50 · 38cab50
1 parent c6058bf
commit 38cab50
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 32 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 
 - Fix `n-select` focus input when closing tag with `filterable` , closes [#1170](https://github.com/TuSimple/naive-ui/issues/1170).
 - Fix `n-button` border on hover conflicts with `n-badge`, closes [#1195](https://github.com/TuSimple/naive-ui/issues/1195).
+- Fix `n-upload` prop `v-model:file-list` dosen't work well when prop `multiple` is `true`, closes [#418](https://github.com/TuSimple/naive-ui/issues/418).
 
 ## 2.18.2 (2021-09-14)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,7 @@
 
 - 修复 `n-select` `filterable` 下关闭标签 input 光标聚焦问题，关闭 [#1170](https://github.com/TuSimple/naive-ui/issues/1170)
 - 修复 `n-button` 在 hover 状态下边框与 `n-badge` 冲突，关闭 [#1195](https://github.com/TuSimple/naive-ui/issues/1195)
+- 修复 `n-upload` 的 `v-model:file-list` 属性在 `multiple` 属性设为 `true` 的时候没有正确更新，关闭 [#418](https://github.com/TuSimple/naive-ui/issues/418)
 
 ## 2.18.2 (2021-09-14)
 

diff --git a/src/upload/demos/enUS/basic.demo.md b/src/upload/demos/enUS/basic.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :headers="{
     'naive-info': 'hello!'
   }"

diff --git a/src/upload/demos/enUS/before-upload.demo.md b/src/upload/demos/enUS/before-upload.demo.md
@@ -4,7 +4,7 @@ Use `before-upload` to prevent uploading.
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   @before-upload="beforeUpload"
 >
   <n-button>Upload PNG</n-button>

diff --git a/src/upload/demos/enUS/controlled.demo.md b/src/upload/demos/enUS/controlled.demo.md
@@ -4,7 +4,7 @@ Example is only a joke.
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   v-model:file-list="fileList"
   @update:file-list="handleFileListChange"
   @change="handleUploadChange"
@@ -25,7 +25,7 @@ export default defineComponent({
       {
         id: 'url-test',
         name: 'URL Test',
-        url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
+        url: 'https://www.mocky.io/v2/5e4bafc63100007100d8b70f',
         status: 'finished'
       },
       {

diff --git a/src/upload/demos/enUS/default-files.demo.md b/src/upload/demos/enUS/default-files.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="defaultFileList"
 >
   <n-button>Upload File</n-button>

diff --git a/src/upload/demos/enUS/drag.demo.md b/src/upload/demos/enUS/drag.demo.md
@@ -1,7 +1,7 @@
 # Drag to Upload
 
 ```html
-<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
+<n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f">
   <n-upload-dragger>
     <div style="margin-bottom: 12px;">
       <n-icon size="48" :depth="3">

diff --git a/src/upload/demos/enUS/image-card-style.demo.md b/src/upload/demos/enUS/image-card-style.demo.md
@@ -6,15 +6,15 @@ The preview in the photo wall will call the internal preview component by defaul
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="fileList"
   list-type="image-card"
 >
   Click to Upload
 </n-upload>
 <n-divider />
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="previewFileList"
   list-type="image-card"
   @preview="handlePreview"

diff --git a/src/upload/demos/enUS/image-style.demo.md b/src/upload/demos/enUS/image-style.demo.md
@@ -6,7 +6,7 @@ You can use `preview-file` to customize the thumbnails of the file.
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="fileList"
   list-type="image"
   :createThumbnailUrl="createThumbnailUrl"

diff --git a/src/upload/demos/enUS/on-finish.demo.md b/src/upload/demos/enUS/on-finish.demo.md
@@ -5,7 +5,7 @@ You can change file's property when upload finishes.
 ```html
 <n-upload
   @finish="handleFinish"
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
 >
   <n-button>Upload</n-button>
 </n-upload>
@@ -20,7 +20,7 @@ export default defineComponent({
     const message = useMessage()
     const handleFinish = ({ file, event }) => {
       message.success(event.target.response)
-      file.url = 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f'
+      file.url = 'https://www.mocky.io/v2/5e4bafc63100007100d8b70f'
     }
     return {
       message,

diff --git a/src/upload/demos/enUS/submit-manually.demo.md b/src/upload/demos/enUS/submit-manually.demo.md
@@ -12,7 +12,7 @@ You can use `submit` method to submit in uncontrolled manner. Also you can do it
 </n-button>
 <n-upload
   @change="handleChange"
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-upload="false"
   multiple
   ref="upload"

diff --git a/src/upload/demos/zhCN/basic.demo.md b/src/upload/demos/zhCN/basic.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :headers="{
     'naive-info': 'hello!'
   }"

diff --git a/src/upload/demos/zhCN/before-upload.demo.md b/src/upload/demos/zhCN/before-upload.demo.md
@@ -4,7 +4,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   @before-upload="beforeUpload"
 >
   <n-button>上传 PNG 文件</n-button>

diff --git a/src/upload/demos/zhCN/controlled.demo.md b/src/upload/demos/zhCN/controlled.demo.md
@@ -4,7 +4,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   v-model:file-list="fileList"
   @change="handleUploadChange"
   @remove="handleRemove"
@@ -25,7 +25,7 @@ export default defineComponent({
       {
         id: 'url-test',
         name: 'URL 测试',
-        url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
+        url: 'https://www.mocky.io/v2/5e4bafc63100007100d8b70f',
         status: 'finished'
       },
       {

diff --git a/src/upload/demos/zhCN/default-files.demo.md b/src/upload/demos/zhCN/default-files.demo.md
@@ -2,7 +2,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="defaultFileList"
 >
   <n-button>上传文件</n-button>

diff --git a/src/upload/demos/zhCN/drag.demo.md b/src/upload/demos/zhCN/drag.demo.md
@@ -1,7 +1,7 @@
 # 拖拽上传
 
 ```html
-<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
+<n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f">
   <n-upload-dragger>
     <div style="margin-bottom: 12px;">
       <n-icon size="48" :depth="3">

diff --git a/src/upload/demos/zhCN/image-card-style.demo.md b/src/upload/demos/zhCN/image-card-style.demo.md
@@ -6,15 +6,15 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="fileList"
   list-type="image-card"
 >
   点击上传
 </n-upload>
 <n-divider />
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="previewFileList"
   list-type="image-card"
   @preview="handlePreview"

diff --git a/src/upload/demos/zhCN/image-style.demo.md b/src/upload/demos/zhCN/image-style.demo.md
@@ -6,7 +6,7 @@
 
 ```html
 <n-upload
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-file-list="fileList"
   list-type="image"
   :create-thumbnail-url="createThumbnailUrl"

diff --git a/src/upload/demos/zhCN/on-finish.demo.md b/src/upload/demos/zhCN/on-finish.demo.md
@@ -5,7 +5,7 @@
 ```html
 <n-upload
   @finish="handleFinish"
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
 >
   <n-button>上传文件</n-button>
 </n-upload>
@@ -20,7 +20,7 @@ export default defineComponent({
     const message = useMessage()
     const handleFinish = ({ file, event }) => {
       message.success(event.target.response)
-      file.url = 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f'
+      file.url = 'https://www.mocky.io/v2/5e4bafc63100007100d8b70f'
     }
     return {
       message,

diff --git a/src/upload/demos/zhCN/submit-manually.demo.md b/src/upload/demos/zhCN/submit-manually.demo.md
@@ -12,7 +12,7 @@
 </n-button>
 <n-upload
   @change="handleChange"
-  action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+  action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
   :default-upload="false"
   multiple
   ref="upload"

diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
@@ -7,7 +7,8 @@ import {
   ref,
   PropType,
   CSSProperties,
-  VNode
+  VNode,
+  nextTick
 } from 'vue'
 import { createId } from 'seemly'
 import { useMergedState } from 'vooks'
@@ -333,6 +334,7 @@ export default defineComponent({
       if (!files || files.length === 0) return
       const { onBeforeUpload } = props
       const filesAsArray = props.multiple ? Array.from(files) : [files[0]]
+
       void Promise.all(
         filesAsArray.map(async (file) => {
           const fileInfo: FileInfo = {
@@ -352,12 +354,24 @@ export default defineComponent({
               fileList: mergedFileListRef.value
             })) !== false
           ) {
-            doChange(fileInfo, e, {
-              append: true
-            })
+            return fileInfo
           }
+          return null
+        })
+      ).then((fileInfos) => {
+        let nextTickChain = Promise.resolve()
+
+        fileInfos.forEach((fileInfo) => {
+          nextTickChain = nextTickChain
+            // eslint-disable-next-line @typescript-eslint/promise-function-async
+            .then(() => nextTick())
+            .then(() => {
+              fileInfo &&
+                doChange(fileInfo, e, {
+                  append: true
+                })
+            })
         })
-      ).then(() => {
         if (props.defaultUpload) {
           submit()
         }

diff --git a/src/upload/tests/Upload.spec.ts b/src/upload/tests/Upload.spec.ts
@@ -47,7 +47,7 @@ describe('n-upload', () => {
 
     getMockFile(input.element, fileList)
     await input.trigger('change')
-
+    await sleep(0)
     expect(onBeforeUpload).toHaveBeenCalled()
     expect(onChange).toHaveBeenCalled()
   })
@@ -56,7 +56,7 @@ describe('n-upload', () => {
     const wrapper = mount(NUpload, {
       props: {
         listType: 'text',
-        action: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f'
+        action: 'https://www.mocky.io/v2/5e4bafc63100007100d8b70f'
       }
     })
     const input = wrapper.find('input')
@@ -65,6 +65,7 @@ describe('n-upload', () => {
     getMockFile(input.element, fileList)
     await input.trigger('change')
 
+    await sleep(0)
     expect(wrapper.findAll('.n-upload-file--text-type').length).toBe(1)
 
     await wrapper.setProps({
@@ -91,7 +92,7 @@ describe('n-upload', () => {
 
     getMockFile(input.element, fileList)
     await input.trigger('change')
-    await sleep(1000)
+    await sleep(0)
     expect(
       wrapper.find('.n-upload-file-info__thumbnail img').attributes('src')
     ).toEqual('/testThumbUrl.png')