The third-party UI library used in this project is AntDesign, so the Upload upload component is used to realize the function of uploading photos.

The Upload upload component provides two ways to upload to the server. The first is to use the default upload method; The second is to use customRequest to override the default upload behavior so you can customize your own upload implementation. For more information: blog.csdn.net/lily_miao/a… .

The second method in this article uses the Ajax method to upload. So how do you upload using axios? After stepping pits, the summary is as follows:

1, upload to the server with multiple parameters, you need to use FormData append method to add other parameters. Only formData data can be uploaded.

customRequest = (option) => { const {appKey, CategoryId} = this. RequestPictureupload / / to formData form object to upload the let formData = new formData (); formData.append("file", option.file); formData.append("appKey", appKey); formData.append("categoryId", categoryId); //uploadPicture encapsulates axios. If (ref => {if (ref.data.errormsg == "uploadPicture ") {// console.log(ref.data.data)}})} / / request interceptor part configuration axios. Interceptors. Request. Use (config = > {let csrfToken = localStorage. The getItem (" token "); config.headers["token"] = csrfToken; If (config.url==" API /v1/picture/upload"){// If (config.url==" API /v1/picture/upload"){// If (config. Headers [' content-type ']="multipart/form-data"; }else{ config.headers['Content-Type'] = 'application/json'; } return config; Return http. post(" API /v1/picture/upload",formData); }Copy the code

(1) View the printed data of FormData(). Link: www.cnblogs.com/gxp69/p/121…

(2) Data in the network during upload.

(3) Axios request parameter setting. Link: www.kancloud.cn/yunye/axios…

(4) The meaning of content-Type. Link: www.cnblogs.com/tugenhua070…

(5) Two ways to upload JS to the back-end server. One is uploaded as a FormData form (in the form of key-value pairs), and the second is uploaded as base64 data. The uploading method should be confirmed with the backend in advance.

Reference link 1: blog.csdn.net/qq_34664239…

Reference link 2: juejin.cn/post/684490…

This article was also uploaded using the customRequest method, which is nice. Link: github.com/react-compo…

To be continued…

(1) Upload one photo and multiple photo paper back-end, and the front desk displays the uploading status of each photo;

(2) Upload photo size Settings;