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

[GenerQAQ]

closed #12340

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

[pull-request-triage]

👋 @GenerQAQ, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @GenerQAQ, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[btea]

Hi, thank you for your contribution. However, the relevant pr seems to already exist. #12344

[GenerQAQ]

Hi, thank you for your contribution. However, the relevant pr seems to already exist. #12344

Yes~I saw that his submission was quite complex, and I feel that my one is quite elegant, hahaha

[btea]

@chenxch what do you think?

[GenerQAQ]

@chenxch pls～

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=12575
Please comment the example via this playground if needed.

[chenxch]

@GenerQAQ Good job, would you mind adding a test case, the case is as follows:

1. First upload the file test-file.txt
2. Upload files test-file.txt, test-file2.txt
   Finally, save the keyList as [test-file.txt, test-file.txt, test-file2.txt]

[GenerQAQ]

@GenerQAQ Good job, would you mind adding a test case, the case is as follows:

1. First upload the file test-file.txt
2. Upload files test-file.txt, test-file2.txt
   Finally, save the keyList as [test-file.txt, test-file.txt, test-file2.txt]

No problem, later today~

[GenerQAQ]

@GenerQAQ Good job, would you mind adding a test case, the case is as follows:

1. First upload the file test-file.txt
2. Upload files test-file.txt, test-file2.txt
   Finally, save the keyList as [test-file.txt, test-file.txt, test-file2.txt]

Added case

[GenerQAQ]

@GenerQAQ Good job, would you mind adding a test case, the case is as follows:

1. First upload the file test-file.txt
2. Upload files test-file.txt, test-file2.txt
   Finally, save the keyList as [test-file.txt, test-file.txt, test-file2.txt]

Modified a case error

[GenerQAQ]

@GenerQAQ Good job, would you mind adding a test case, the case is as follows:

1. First upload the file test-file.txt
2. Upload files test-file.txt, test-file2.txt
   Finally, save the keyList as [test-file.txt, test-file.txt, test-file2.txt]

Corrected lint error, thx~

[GenerQAQ]

@chenxch I submitted an incorrect PR and it has now been restored. Sorry!

[chenxch]

LGTM.

[GenerQAQ]

@chenxch @btea @ryuhangyeong May I ask what further steps are required to merge this PR?

[btea]

I think there seems to be no problem.

[lyhczz]

Hello, I have the above problem. Failed to modify data in the beforeUpload method. The difference is that promises also have an asynchronous method inside them.
@GenerQAQ

[JustGenius-s]

@lyhczz Same question, but i havd made a solution to make this code work well.

Modify the file of node_modules\element-plus\es\components\upload\src\upload-content2.mjs

In function upload:

const upload = async (rawFile) => {
      ...
      try {
        const originData = props.data;
        const beforeUploadPromise = props.beforeUpload(rawFile);
        hookResult = await beforeUploadPromise; // Change the order of calling this statement before to update `beforeData`
        beforeData = isObject(props.data) ? cloneDeep(props.data) : props.data;
        if (isObject(props.data) && isEqual(originData, beforeData)) {
          beforeData = cloneDeep(props.data);
        }
      } catch (e) {
        hookResult = false;
      }
      ...
    };

After that, manually import this component form node_modules\element-plus\es\components\upload\index in ur vue component. And enjoy use it!

import { ElUpload } from "element-plus/es/components/upload/index"

But i wonder if i should make a PR to slove this prolem.

[chenxch]

/cc @GenerQAQ Would you please take a look at this question? Thank you very much.

[GenerQAQ]

@chenxch @lyhczz Received! I will reproduce the question tonight. Thank you

[xiaoshawangzi]

This issue seems to have not been resolved yet. My version is 2.3.8, El-Upload reactivity of 'data' attribute has been broken in 2.3.2 onwards