项目中有个updateUserInfo的需求,也就是非常常见的更新用户信息的需求,这个需求除了更改用户的基本信息外,还要修改用户的头像,我司后端目前处理上传图片的逻辑不是属于常规的(常规的:json和图片分开传,也就是图片单独有个上传地址,通过使用饿了么的upload插件,把图片上传到单独的图片地址后后台会相应的返回一个在线url,然后最后调用更新信息接口的时候直接把刚才的url和用户信息一起提交就可以了),而是图片和json数据混传,使用原生的input[file]模式上传图片,我搞了一小天也没上传成功,这里记录一下:
1.首先如果你要传递这种混合的数据,如果你不使用form表单的话,那么你就要自己使用js模拟formData数据,
也就是let formInstance = new FormData();
2.要记得使用formInstace.append去添加字段,formInstance.append('key',value);
3.如果是file文件,直接通过input的change事件返回的event.target.files[0]获取,然后拼装就可以了,雷类似formInstance.append('file',event.target.files[0]),不需要对这个event.target.files[0]单独处理,比如转base64什么的都是不需要的
4.关键的一个东西:如果你要上传json数据,那么你要做如下处理:
const content = JSON.stringify(yourData)
const blob = new Blob([content], { type: 'application/json' })
formInstance.append('yourJsonKey',blob)
如果上面的json数据设置不对的话 后台会报401 不支持media type。
5.以上拼装好了直接发送post请求就可以了,注意你最后拼出的formInstace对象直接传给后台即可,不可再stringify,否则你就会传到后台一个空对象,另外你不要相信网上那些什么要设置content-type一类的骚操作,全扯淡,这个content-type字段能不动就尽量不动,都交给浏览器自己去判断就可以了,你传输formdata数据,浏览器自己就自动会识别出multipart/form-data; boundary=----WebKitFormBoundaryFWWHJqA8rBGrR6e9的。不用你管。