fix(components): [upload] before-upload change data in promise (#12575)

* fix(components): [upload] befroe-upload change data in promise

closed #12340

* fix(components): [upload] befroe-upload change data in promise

closed #12340

packages/components/upload/__tests__/upload.test.tsx

@@ -165,6 +165,88 @@ describe('<upload />', () => {
       expect(keyList).toEqual(['test-file.txt', 'test-file2.txt'])
     })
 
+    test('in beforeUpload return promise change data correctly to request', async () => {
+      const keyList: string[] = []
+      const beforeUpload = vi.fn((file: File) => {
+        return new Promise<File>((resolve) => {
+          data.value.key = file.name
+          resolve(file)
+        })
+      })
+      const httpRequest = vi.fn((val) => {
+        keyList.push(val?.data?.key)
+        return Promise.resolve()
+      })
+
+      const data = ref({ key: '' })
+
+      const wrapper = mount(() => (
+        <UploadContent
+          data={data.value}
+          multiple={true}
+          beforeUpload={beforeUpload}
+          httpRequest={httpRequest}
+        />
+      ))
+
+      const fileList = [
+        new File(['content'], 'test-file.txt'),
+        new File(['content2'], 'test-file2.txt'),
+      ]
+      mockGetFile(wrapper.find('input').element, fileList)
+
+      await wrapper.find('input').trigger('change')
+
+      expect(beforeUpload).toHaveBeenCalled()
+      await flushPromises()
+
+      expect(keyList).toEqual(['test-file.txt', 'test-file2.txt'])
+    })
+
+    test('upload files and save keyList', async () => {
+      const keyList: string[] = []
+      const beforeUpload = vi.fn((file: File) => {
+        return new Promise<File>((resolve) => {
+          data.value.key = file.name
+          resolve(file)
+        })
+      })
+      const httpRequest = vi.fn((val) => {
+        keyList.push(val?.data?.key)
+        return Promise.resolve()
+      })
+
+      const data = ref({ key: '' })
+
+      const wrapper = mount(() => (
+        <UploadContent
+          data={data.value}
+          multiple={true}
+          beforeUpload={beforeUpload}
+          httpRequest={httpRequest}
+        />
+      ))
+
+      // upload the first file
+      const firstFile = new File(['content'], 'test-file.txt')
+      mockGetFile(wrapper.find('input').element, [firstFile])
+      await wrapper.find('input').trigger('change')
+      await flushPromises()
+
+      // upload the second file
+      const secondFile = new File(['content2'], 'test-file2.txt')
+      mockGetFile(wrapper.find('input').element, [firstFile, secondFile])
+      await wrapper.find('input').trigger('change')
+      await flushPromises()
+
+      // check the keyList after uploading both files
+      expect(keyList).toEqual([
+        'test-file.txt',
+        'test-file.txt',
+        'test-file2.txt',
+      ])
+    })
+
     test('onProgress should work', async () => {
       const onProgress = vi.fn()
       const httpRequest = vi.fn(({ onProgress }) => {

packages/components/upload/src/upload-content.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 import { isObject } from '@vue/shared'
-import { cloneDeep } from 'lodash-unified'
+import { cloneDeep, isEqual } from 'lodash-unified'
 import { useNamespace } from '@element-plus/hooks'
 import { entriesOf } from '@element-plus/utils'
 import { useFormDisabled } from '@element-plus/components/form'
@@ -92,9 +92,14 @@ const upload = async (rawFile: UploadRawFile) => {
   let beforeData: UploadContentProps['data'] = {}
 
   try {
+    // origin data: Handle data changes after synchronization tasks are executed
+    const originData = props.data
     const beforeUploadPromise = props.beforeUpload(rawFile)
     beforeData = isObject(props.data) ? cloneDeep(props.data) : props.data
     hookResult = await beforeUploadPromise
+    if (isObject(props.data) && isEqual(originData, beforeData)) {
+      beforeData = cloneDeep(props.data)
+    }
   } catch {
     hookResult = false
   }