1、axios拦截器引发的备案
// axios.defaults.headers.post['Content-Type'] = 'application/json';
// axios.interceptors.request.use(req => {
// let data = req.data
// console.log('befor convert',data)
// let params = new URLSearchParams();
// for (let name in data) {
// params.append(name,data[name])
// }
// req.data = params.toString()
// console.log('after convert',req)
// return req
// },error => {
// return Promise.reject(error)
// })把这段代码去掉就好，要不然就出现这个问题：
参考：
总结：
1、加上这个，axios的默认content-type会从application/json变成application/x-www-form-urlencoded
2、去掉上面的代码，get请求的时候使用qs.stringify()
2、axios 发送数据，java后台如何接收
1）java后台参数接收值类型，如String，int，那么axios传递的时候用qs.stringify，具体代码如下：
this.$post('http://localhost:9090/user/login',Qs.stringify(this.user))
.then(res=>{
if(res.success){
this.$Message.success('登录成功，正在跳转...');
this.setUserInfo(res.data.user);
this.$router.push('/');
}
})
.catch(error=>{
})
@RequestMapping(value = "/login",method = RequestMethod.POST)
public String login(@RequestParam String name,@RequestParam String password,HttpSession session) {}
2）java后台参数接收实体类类型，如User，那么axios传递的时候直接传递，具体代码如下：
this.$post('http://localhost:9090/teacher/save',{
teacher:this.teacher,labels:this.label.list
})
.then(res=>{
console.log('res=',res)
})
.catch(err=>{
})
@RequestMapping(value = "/save",method = RequestMethod.POST)
public String save(@RequestBody TeacherLabels teacherLabels){
AjaxResult result = new AjaxResult();
result.setSuccess(true);
return JSON.toJSONString(result);
}
@Getter
@Setter
@ToString
public class TeacherLabels {
Teacher teacher;
List
3、axios 拦截器设置headers的Authorization
axios.interceptors.request.use(config => {
let token = Cookies.get("token");
if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = token;
}
return config
},error => {
return Promise.reject(error)
})
4、axios上传视频，注意要设置spring-boot配置上传文件大小设置，
否则会报：springboot org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (13762551) exceeds the configured maximum (10485760)
//上传老师视频
uploadTeacherVideo(e){
var file = e.target.files[0]
if (!/\.(mp4|avi)$/.test(e.target.value)) {
this.$Message.error({
content:'视频类型必须是.mp4、.avi中的一种',duration:3
});
return false
}
let formdata = new FormData();
formdata.append('imgStream',file);
console.log('正在上传视频。。。')
this.uploadFileToQiniu(formdata);
},uploadFileToQiniu(formdata){
this.$post(`${this.$url}/teacher/uploadFileToQiniu`,formdata)
.then(res=>{
if(res.data.success){
let hashKey = res.data.data;
this.avatarSrc = `${this.$qiniuImgUrl}/${hashKey.key}`;
this.$Message.success({
content:'上传成功！',duration:3
});
}else{
this.$Message.error({
content:res.data.msg,duration:3
});
}
})
.catch(err=>{
})
},修改application.properties文件：
#最大上传文件大小
spring.http.multipart.max-file-size=50mb
spring.http.multipart.max-request-size=50mb6、axios get post传参
axios.get(url,{ params: {id:'',name:''}})
axios.post(url,{id:'',name: ''},{ params: {id2: '',name2: ''}})
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,config]])
axios.patch(url[,config]])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});
axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#options(url[,config])
axios#post(url[,config]])
axios#put(url[,config]])
axios#patch(url[,config]])
axios#getUri([config])
