2022-06-14 17:39

FormData提交表单数据默认content-type为multipart/form-data

王姐姐

WEB前端

(2695)

(0)

收藏

FormData提交表单数据时,不管是否上传文件,默认content-type都为multipart/form-data

      handleAdd:function(){
          var formData = new FormData();
          formData.append("questionTypeId",this.question.questionTypeId);
          formData.append("title",this.question.title);
          axios.post(this.path+"/manage/question/insert",formData)
          .then(res=>{
              console.log(res);
          });           
      }

查看请求头:


微信图片_20220614173800.png

如果上传图片或者上传文件时,数据提交不了,检查请求头发现Content-Type为application/x-www-urlencoded这样数据提交不上去,就会报错,这可能在项目中设置了axios的固定的请求头。

如果你自己设置axios的headers为multipart/form-data,这样也会出错,后端找不到boundary,也就是说如果写死了,浏览器无法自动给我们的报文添加boundary。

Caused by: java.io.IOException:
org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

这时需要通过axios的transformRequest来删除设置的请求头:

           formData.append("files",this.$refs.mypic.files[0]);
                    console.log(formData.getAll("files"));
                    this.axios.post(this.path+"/manage/question/insert",formData,{
                        transformRequest:function(data,headers){
                            delete headers.post['Content-Type']
                            return data;
                        }
                    }).then(res=>{
                        
                   })

这样再上传就成功了。





0条评论

点击登录参与评论