Vue axios post request to pass FormData type parameters
tags: Vue Front and rear separation
Reference link:
Axios encountered the pit when uploading the file, no multipart boundary was found
axios encapsulates use, intercepts specific requests, and determines whether all requests are loaded
Front-end request method
const formData = new FormData()
formData.append('role', 1)
formData.append('excelFile', fileObj)
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
const { data: res } = await this.$http.post('admin/user/add', formData, config)The Content-Type of the request header needs to be set to multipart/form-data (I have solved the problem and checked many articles saying that it does not need to be set. I tried it to no avail. If it is not set, the default type is automatically added instead of the FormData we want. )
note:Don't serialize formData , Post request needs to be serialized (usually qs.stringify()), but not required to pass FormData with post request
If the formData is serialized, the parameters received by the backend will be null (this problem caused me for a long time, only to find out that it was a serialization problem)
Bonus:Determine whether the axios request data is of formData type or ordinary Object
Backend receiving parameters
@PostMapping("/admin/user/add")
@ResponseBody
public Map<String, Object> addUserByExcel(@ModelAttribute UserExcelVO userExcelVO) throws Exception {
}The backend uses a java object to receive parameters
Note: Cross-domain issues
Intelligent Recommendation
Vue axios sends get and post request parameters
Vue axios sends get and post request parameters get request post request There are two types of post parameters, one is to pass parameters directly, the effect is to encapsulate into a json string, an...
Vue AXIOS Sends Formdata Request
First, introduction axios By default isPayload Format data request, but sometimes the rear-end reception parameter requirements must beForm Data In format, so we have to convert. Payload with Form Dat...
VUE uses POST request to pass parameters in Body
1, front end 2, the back end...
Axios post request, pass parameters, no data received in the background
Post request is not the same way as get request to pass parameters Post request: (The parameters in get can be directly in the form of key-value pairs, post needs to convert key-value pairs into query...
Request data using axios, post request error. Because the request parameters passed by axios are in json format, and the backend interface requirements are formData.
Set request header standard notation Set request header Solution 1: (IOS compatibility is problematic, not recommended Solution 2: Use node's qs module, recommended Reference material...
More Recommendation
axios converts the post submission request to formdata
Install the necessary dependencies first POST parameter serialization (add request interceptor) Finally, introduce this axios.js file where needed...
Vue uses the axios post method to pass parameters to the java background
Use the official method of this method, the background can not get the parameters Provide a solution: var params = new URLSearchParams(); params.append('userName', this.userName); params.a...
Vue AXIOS POST pass parameters, the background receives the data is null
Since the AXIOS defaults to data, the data format is Request PayLoad, which is not our usual format format, the backend may not be able to get normally, so before sending, you need to use the QS modul...
