vue ajax上传文件时Java后端报错

我正在做一个上传头像功能,前端使用vue.js,后端是springboot构建的项目,但是每次vue请求传到后端时,都会报格式错误。代码如下:

后端接口:
@PostMapping("/userinfo/uploadHeadImg")
public AjaxResult<?> uploadHeadImg(@RequestParam MultipartFile file, @RequestParam Integer userInfoId) throws Exception{
    return tbUserinfoService.uploadHeadImg(file,userInfoId);
}

html部分:

<div class="setting-head">
  <!--个人头像-->
  <div class="user-head-img" >
    <div class="use-click" @click="uploadHeadImg">
      <el-avatar :size="60" :src="userHeadImg" >
      </el-avatar>
       <input type="file" accept="image/*"  class="hiddenInput" @change="handleFile"/>
    </div>
  </div>
</div>

js部分:

    handleFile: function (e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.$store.dispatch("uploadHeadImg",file);
      };
      reader.readAsDataURL(file)
    },

store.js 文件部分:


  actions:{
    uploadHeadImg({commit,state},file){

      Vue.http.post('/userinfo/uploadHeadImg',{file:file,userInfoId:state.userInfoId},
        {headers: { 'Content-Type': 'multipart/form-data' }},
        ).then(function(res){
          var result = res.data;
          if(result.code=="200"){
            this.userHeadImg = res.result;
            commit("setUserHeadImgFile",file);
          }
      })
    }


报错现象分两种情况:

当store.js部分添加了

    {headers: { 'Content-Type': 'multipart/form-data' }},

后,后端报错如下:
Resolved [org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found]

我在网上找了大部分的解决方式是说去掉 header请求中的 Content-Type就行了。



但是当我去掉这部分后报错又变成了:
Resolved [org.springframework.web.multipart.MultipartException: Current request is not a multipart request]

网上搜索解决方式:说请求头添加


'Content-Type': 'multipart/form-data'

陷入死循环中....

希望有熟悉这部分的老哥可以帮忙请求看看,谢谢!!!

通过postman测试,后端接口成功,但就是通过vue访问就会报错

1个回答

把file放在FormData对象中来传到后台,

你如果去掉了Content-Type': 'multipart/form-data',那么默认就是application/x-www-form-urlencoded这个
所以你第二个错Current request is not a multipart request这个就是说不是一个multipart请求

luomiaozhong
hlllmm 是这个原因,非常感谢你的回答。嘿嘿。
7 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问