美文网首页
HTML5的FormData上传文件和数据踩坑记录

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

作者: 有田春雪 | 来源:发表于2018-05-30 10:17 被阅读0次

使用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))

相关文章

网友评论

      本文标题:HTML5的FormData上传文件和数据踩坑记录

      本文链接:https://www.haomeiwen.com/subject/bhhtsftx.html