FormData的出现意义:
- 它是一个对象在使用的时候需要 new FormData();
- 它是H5才出来用于组织Form键值的对象,需要IE9+;
- 它有区别与普通对象,尤其是在异步请求时;
- 此对象不可以被log打印,需要遍历方式;
这是我目前搜集到的所有信息,在文章结尾有官方正式解释的链接,和此对象的兼容性表,下面是我的实战解析,如果有帮助到大家,麻烦来个点赞关注,我会持续更新。
axios 多文件上传实战:
- 什么原因促使我接触到了这个对象?
在普遍的学习创作下,此对象其实是可有可无的,因为我们好多的细节,都被封装了,比如axios,你只管用就好.但是我在多文件上传的时候,问题出现了,后端没办法正常接收我的post请求,我们来看下控制台的载荷
,在网络菜单里:
明显看出,我的字段后面带了.0,是因为我在上传的时候把文件数组直接提交了上传,如果是多文件,它还会.1,.2 ,这样的话就会导致后端解析问题,具体后端是否可以调整这里不做研究,我们来研究怎么能让提交的东西后端可以使用。下面是我把普通对象利用formData 对象封装的实例:
const DomFormToAjax = (DomForm, filForm) => {
let AjaxForm = new FormData();
for (let key in DomForm) {
AjaxForm.append(key, DomForm[key].value);
}
for (let key in filForm) {
if (filForm[key].length != 0) {
for (let index in filForm[key]) {
AjaxForm.append(key, filForm[key][index]);
}
}
}
return AjaxForm;
}
这个对象的方法和兼容性我就不做解释了,自己点击文末链接前往。
那再来看看,由formData 提交完的数据是什么样的:
相信这样应该很直观了。
感悟:
在不清楚问题原因之前,要沉着分析,实在没有头绪,来百度看看,说不定就解决了,没有头绪是因为我们积累不充分,经验不充分,困难真的是我们前进的阶梯。