前端vue使用了qs对传递的参数进行序列化成URL的形式，以&进行拼接，但是我在进行图片功能文件上传时，后台以MultipartFile类型接收，一直提示文件为空，让我很无语。
开窍
于是开始漫长的度娘时光，网上也有很多不同的解释，病急乱投医，也试了很多方法，几经确定我的axios参数传递过程中也没有错误，我甚至开始怀疑是不是后台的问题。然后就看到了一个与众不同的解释：传递的文件流被qs进行了转换
然后，我就加了一个判断，如果是文件流就不进行qs转换，问题遂得以解决
main.js相关代码，改进之前：
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
// 为请求头对象，添加token验证字段
config.headers.token = window.sessionStorage.getItem('token')
config.data = qs.stringify(config.data)
// 在最后必须 return config
return config
})
main.js相关代码改进之后：
axios.interceptors.request.use(config => {
// 为请求头对象，添加token验证字段
config.headers.token = window.sessionStorage.getItem('token')
if (Object.getOwnPropertyNames(config.data).length !== 0) {
config.data = qs.stringify(config.data)
}
// 在最后必须 return config
return config
})
element上传组件引用
<el-upload action="" :before-upload="beforeAvatarUpload">
<el-button type="primary">点击上传</el-button>
</el-upload>
element上传时调用的方法
async beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 5
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
return false
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 5MB!')
return false
}
var formData = new FormData()
formData.append('file', file)
const { data: res } = await this.$http.post(
'/goods/upload',
formData
)
if (!res.success) {
return this.$message.error('图片上传失败！')
}
return this.$message.success('图片上传成功！')
},