“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

My colleague used WebUploader to upload attachments, but I used Element to upload attachments… In the front-end development to today, I feel that the use of WebUploader is less and less people, now basically the most popular Element, Vant, ant-Design, and so on excellent UI framework…

Today, my leader asked me to add several functions to the old project. I thought it would only take a few hours, but it took me a long time to finish it. The main reason is that the interface is reusable. My colleague used WebUploader to complete the function page, and the attachment uploading interface is written in accordance with the form, while my new one uses Element…

Identify the problem:

I thought it was ok, but when I switched on the interface, I was stupid…

There was a mistake, holy shit. For our front end, it doesn’t matter why it went wrong first, the error is obvious Code 500.

I believe everyone is also clear about this mistake, so I will not talk about it here. I did not pay too much attention to it at the beginning, but I thought it might be my fault, so I conducted investigation. Later, I found that compared with my colleague’s previous call to this interface, my call this time was somewhat different. Let’s take a look at the details:

This is what I call:

This is what my colleague called:

You can obviously see that one is JSON and the other is a table. It’s definitely not going anywhere.

Ending question process:

So my first thought was to try it out. I found a way to set headers in Axios

var instance = axios.create({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
Copy the code

The result is this:

In fact, still can’t go, still can’t! Because content-Type: Response headers is still application/json; charset=UTF-8

Obviously, this conversion doesn’t work! So I started to generate the conversion plug-in, and planned to upload the attachment part using WebUploader, so that it was consistent with my colleague’s data request, and it would definitely work. So I googled it, and I used WebUploader in Vue, and MY god, it was a little bit too much configuration, and I was maybe lazy, so I gave up.

Successfully solved:

After a while, I went to the Element website to look at the documentation. It turned out that they did support sending Form Dta. So I changed it to this:

I made it through

To sum up, I was too careless. At the beginning, I didn’t carefully observe the interface request standard and Element’s official document. Maybe I felt it was relatively simple, so I became careless and finally took some time to solve it.

Finally WebUploader: WebUploader is a simple modern file upload component developed by Baidu WebFE(FEX) team that uses HTML5 as the main and FLASH as the auxiliary. In the modern browser can give full play to the advantages of HTML5, while not abandoning the mainstream IE browser, using the original FLASH runtime, compatible with IE6+, iOS 6+, Android 4+. Two sets of runtimes, the same call method, for users to choose. Is a simple HTML5-based plugin developed by Baidu WebFE(FEX) team.

WebUploader official website

The difference between Formdata and JSON… Here I have no key to introduce, if interested partners can jump to their own:

Different support for FormData and Json

But before you go please give a thumbs up ~ thanks for reading!!