最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了

首先照着formdata文档来先new 一个对象

let formData = new FormData()
formData.append('xxx', 'yyyyy')

跑一遍没报错,好像是可以的,但是就是console直接打印是空的,看文档说要这么干:

console.log(formData.get('xxx'))

当然这个方法在低版本chrome低版本是没有用的,需要chrome 50+,我的是49,瞬间感觉自己考试成绩是59分有木有


算了不计较,FormData对象有了开始提请求了,去百度看别人怎么写的就复制粘贴了:

submitForm(event) {
 let formData = new FormData()
 formData.append('name', this.name)
 formData.append('age', this.age)
 formData.append('file', this.file)
 let config = {
   headers: {
      'Content-Type': 'multipart/form-data'
   }
 }
 this.$http.post('/myupload', formData, config).then(function (res) {
    if (res.status === 2000) {
     /*这里做处理*/
    }
 })
}

Emmm,乍看没啥问题,那就先跑呗,跑完发现问题来了:

后台开始报错(java后台):

no multipart boundary was found

字面上来讲就是boundary 找不到了,回过头看我们的请求头好像确实没有,咋办,找资料呗,
找到一个分析http和boundary的博客https://blog.csdn.net/five3/article/details/7181521 
想想boundary不就是一个随机生成的分割符嘛我加上一个随机数不就得了


let config = {
   headers: {
    'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
    } 
}

这么干不报错了,后台能通了,但是总感觉哪里不对,上传文件请求头有这么麻烦么,还要自定义boundary,身为程序猿总感觉有问题

再看资料 终于找到一个说的好的,地址暂时忘了存找不到了但大意是这样:

"自做聪明!!!,浏览器会自动判断类型给我们加上content-type ,自动加入的content-type里面就会有boundary",

嗯无形之中被大神嘲讽一波

算了,正事要紧,赶紧去了config再试

submitForm(event) {
 let formData = new FormData()
 formData.append('name', this.name)
 formData.append('age', this.age)
 formData.append('file', this.file)
 this.$http.post('/myupload', formData).then(function (res) {
    if (res.status === 2000) {
     /*这里做处理*/
    }
 })
}

跑完发现后台接不到东西,调试器里面content-type居然是application/json


看着完全不对路的请求头,我感觉自己受到了暴击伤害,肯定哪里有问题!!

目前来看submit方法是一点毛病没有,只能去看axios对我的请求头干了啥,

去nodemodules里面看源码,也是没毛病,再去看看vue里axios配置文件,终于找到问题所在


由于业务需要,axios配置了拦截器,在里面做了数据处理

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做了坑爹的数据处理
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

这个数据把我们的数据类型变成了Object,so,浏览器给出的是application/json,

解决方案就是 重新creat一个纯净的axios请求,挂载到vue原型里,然后重新请求,这个时候发现请求成功,后台也接收到文件数据,完美!!

总结:网上代码不可全信,还是看文档释义好些,formData是个不一样的对象,需要纯净的,纯净的,纯净的(重要的事情说三遍)axios请求,最后贴出formdata的成功请求头

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyb1zYhTI38xpQxBK

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="city_id"

1

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="company_id"

2
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryyb1zYhTI38xpQxBK--
如果跟这种形式不一样,恭喜你,代码有问题,改吧 得意 得意


Logo

前往低代码交流专区

更多推荐