做一个博客，最起码你要可以更换用户头像吧，不然谁知道你是谁啊。
当时有过用ajax上传图片的经验，但是这次就不一样了，因为我用了axios的拦截器，详细可以看我另一篇帖子。
由于我上传图片的方式post，而我在拦截器上的post的请求都自动加上 Content-Type = 'application/json; charset=utf-8'
axios拦截器的代码在下面
service.interceptors.request.use(
config => {
const token = store.getters.getToken ? store.getters.getToken : localStorage.getItem('token');
if (token) {
config.headers["Authentication"] = token
}
if (config.method === 'post' || config.method === 'put') {
// config.data = qs.stringify({...config.data });
config.headers['Content-Type'] = 'application/json; charset=utf-8';
config.data = JSON.stringify({...config.data })
} else if (config.method === 'get') {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
config.params = {...config.params }
}
return config;
}, error => {
return Promise.reject(error);
}
)
从上面可以看出来，这个代码是不行的，因为我们上传图片等文件的时候我们需要我们的请求头 Content-Type 是'multipart/form-data'才可以上传成功。
解决办法
经过查阅知道，axios不仅可以在拦截器上设置请求头信息，也可以在封装后的请求体上面加入请求头，headers:{}属性，所以，我上传的图片代码是这样
userApi.uploadAvatar = (file) => {
let data = new FormData();
data.append("avatar", file)
return service({
url: `${baseUrl}/updateAvatar`,
data: data,
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'post'
})
}
可以看到，我们加上了请求头，但是这样并没有什么效果，因为我在拦截器上已经设置死了 只要是post方法，必须是另一种请求头，但是如果将拦截器上面的删除掉的话，每个post方法都要加上headers，很麻烦。所以我们可以采取直接照顾特殊方法的方法，直接修改拦截器post部分的代码：
if (config.method === 'post' || config.method === 'put') {
// config.data = qs.stringify({...config.data });
if (config.headers['Content-Type'] === 'multipart/form-data') {
} else {
config.headers['Content-Type'] = 'application/json; charset=utf-8';
config.data = JSON.stringify({...config.data })
}
}
可以看到如果我们的请求头是 config.headers['Content-Type'] === 'multipart/form-data' 不做任何操作，问题解决。