FormData的出现意义:

  1. 它是一个对象在使用的时候需要 new FormData();
  2. 它是H5才出来用于组织Form键值的对象,需要IE9+;
  3. 它有区别与普通对象,尤其是在异步请求时;
  4. 此对象不可以被log打印,需要遍历方式;

这是我目前搜集到的所有信息,在文章结尾有官方正式解释的链接,和此对象的兼容性表,下面是我的实战解析,如果有帮助到大家,麻烦来个点赞关注,我会持续更新。


axios 多文件上传实战:

  1. 什么原因促使我接触到了这个对象?
    在普遍的学习创作下,此对象其实是可有可无的,因为我们好多的细节,都被封装了,比如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 提交完的数据是什么样的:
在这里插入图片描述
相信这样应该很直观了。


感悟:

在不清楚问题原因之前,要沉着分析,实在没有头绪,来百度看看,说不定就解决了,没有头绪是因为我们积累不充分,经验不充分,困难真的是我们前进的阶梯。

Tip

MDN-formData;查看具体方法及浏览器兼容

❤️❤️❤️亲们,有用记得关注点赞~~~

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐