This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

  • At present, there are many kinds of component libraries in the market, but they are basically the same, all changes are similar, this time let’s take a look at the Upload file component

Basically, the following attributes can be used

For example:.xls,.xlsx means that only XLS and XLSX files can be accepted, the rest are not allowed to be selected

ShowUploadList: Sets the list interaction ICONS. It can also be a Boolean value, indicating whether to display

BeforeUpload: Hook before uploading a file, parameter is uploaded file, stop uploading if false is returned. A Promise object is returned, which stops uploading when a Promise object is rejected and begins uploading when a resolve object is passed in to a File or Blob object. You can also return upload.list_ignore, at which point the file will not be displayed in the list. Note: IE9 does not support this method

The business process

There are two main events:

1. Before uploading the file, you need to save the selected file for further use

2. Just take the selected file with you when sending the request

implementation

Step 1 (before uploading the file, you need to save the selected file for further use) :

BeforeUpload This function is a function before uploading a file. The function comes with two arguments (see figure below) : the first is an object that contains the basic data of the file you selected such as file name, file size, etc. You can use it to show the file name or something. The second is a File that we need to save for later use

Step 2 (send the request) :

The difficulty of this step is that you need to generate a new formData, so I’ll post the code

Const formData = new formData () fileList. ForEach (file => {// fileList is an array of files to upload. Formdata.append ('file', }) // Send the requestCopy the code

Once the formData is generated, you can simply put it in when you send the request, and the browser will automatically recognize it. (It’s up to you how to send the request, I’m using Axios.)

At first, I used Axios, but I don’t know why the formData couldn’t be brought up. Later, I changed it to FETCH. If you are interested, you can have a look

This chapter update to this, the original is not easy, reprint please indicate the source, thank you