HTML5的FormData上传文件和数据踩坑记录

使用formdata同时上传图片和数据

因业务要求表单数据和图片要求同时上传, 所以使用formdata来上传数据

遇到的坑

  1. form表单不能嵌套

开始没注意, 修改别人的代码时没发现已经有form表单了, 自己再新建form的时候就嵌套了, 导致formdata无法获取到表单的数据

  1. formdata可以append额外的参数进去

需要以键值的形式 formdata.append('key' , value)

  1. formdata的打印
  • 直接consoleformdata是空的对象, 如果需要查看, 用for of遍历
    for(var [key, value] of formdata.entries()){
        console.log(key, value);
    }
  • 也可以使用逐个打印的方法
    var i = formData.entries();

    i.next(); // {done:false, value:["k1", "v1"]}
    i.next(); // {done:fase, value:["k1", "v2"]}
    i.next(); // {done:fase, value:["k2", "v1"]}
    i.next(); // {done:true, value:undefined}
  1. 在fetch中使用formdata

在fetch中直接使用formdata会报错

     fetch(url, {
        type: 'post',
        credentials: 'include',  // 重要
        head: { },  // 重要
        body: formdata
    }).then(res => return res.json()).then(result => console.log(result))
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容