Shulou(Shulou.com)05/31 Report--

It is believed that many inexperienced people have no idea about how to customize the location of the file list display using the Upload upload component in Ant Design. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Software environment

MacOS Big Sur 11.1

React 16.12.0

Ant Design 4.10.0

Actual effect

One of the existing requirements is to upload the file. Click the Browse File button. When the file is selected, the list of uploaded files is displayed at the top of the button, as shown in the following figure.

Current effect

Ali's Ant UI component library is currently used, and the upload component is used. The official example is shown in the following figure.

After local use, as shown in the following figure

How can we achieve the effect we need? Google has written a lot of articles and found a way to rewrite the itemRender method, customize the display of the list of files, and use this method to rewrite multiple action.

Later, I looked at the code written by the front-end staff of the company and saw another solution.

Mainly use two Upload components, the first Upload component is mainly to display the file list, the second Upload component is to select the file upload this operation, however, after selecting the file, the file list is hidden in the display below.

Assign a list of the resulting files to the first Upload component, roughly as follows:

Some of the codes are as follows:

After reading the above, have you mastered how to customize the location of the file list display using the Upload upload component in Ant Design? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.