乐趣区

使用js-FormData传文件流传json重点

jiezi

先介绍 js 的 FormData，FormData 是 XMLHttpRequest Level 2 新增的一个接口，利用 FormData 对象, 我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件, 我们还可以使用 ajax 方法来异步的提交这个 ” 表单 ”. 使用 FormData 的最大优点就是我们可以异步上传一个 二进制文件 .
这里说下 FormData 的 append 方法，

给当前 FormData 对象添加一个键 / 值对(append)

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

参数值

name

字段名称.

value

字段值. 可以是, 或者一个字符串, 如果全都不是, 则该值会被自动转换成 字符串.

filename

(可选) 指定文件的文件名, 当 value 参数被指定为一个 Blob 对象或者一个 File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。”) 对象时, 该文件名会被发送到服务器上, 对于 Blob 对象来说, 这个值默认为 ”blob”.

这里要注意下 value 字段，如果你要填入的是一个对象，会将它转换成字符串，也就是最后传给后台的都是[object object]，这样后台当然是无法解析的。下边举个例子，大家就明白了

好了，请上我们的两位同学，小明和胖虎，你们就不用发言了，我会以 json 的形式介绍你们的情况和个人癖好，请坐。

var json=[{'name':'小明','age':15,'skills':['抽烟','喝酒','烫头'],'family':{'father':'大明','mohter':'小红'}},
         {'name':'胖虎','age':17,'skills':['打架','打架','还是打架'],'family':{'father':'佐藤','mohter':'爱田'}},
     ]


首先我们先试一下，把小明的 family 对象传给后台。

var data=new FormData()
     data.append('family',json[0].family)
     $.ajax({
         url:'demo.php',
         type: "Post",
         dataType: "json",
         cache: false,// 上传文件无需缓存
         processData: false,// 用于对 data 参数进行序列化处理 这里必须 false
         contentType: false, // 必须
         data:data,
         success:function (res) {console.log(res);
         },
         error:function (error) {console.log(error);
         }
     })

结果：

被解析成了 object object，有人该说了，你把它用 JSON.stringify 序列化之后不就行了，然后后端配合，再解码成 json，对，这样确实行，但不要忘了，咱们还是需要传文件流的，文件流被序列化之后会被转化成一个空对象，这样后台就无法识别。由于时间原因，这里就不演示反面案例了。
这里我们要用两个语法
1.a[‘b’] 等于 a.b
2.c[0]取得是 c 数组的第一项
正确方法：

var data=new FormData()
for(var i=0,len=json.length;i<len;i++){data.append('json['+i+'][name]',json[i].name)
        data.append('json['+i+'][age]',json[i].age)
        data.append('json['+i+'][family][father]',json[i].family.father)
        data.append('json['+i+'][family][mother]',json[i].family.mohter)
        for(var j=0,len2=json[i].skills.length;j<len2;j++){data.append('skills['+i+']['+j+']',json[i].skills[j])
        }
    }
     $.ajax({
         url:'demo.php',
         type: "Post",
         dataType: "json",
         cache: false,// 上传文件无需缓存
         processData: false,// 用于对 data 参数进行序列化处理 这里必须 false
         contentType: false, // 必须
         data:data,
         success:function (res) {console.log(res);
         },
         error:function (error) {console.log(error);
         }
     })

之后，我们再给小明和胖虎每人上传一张个人写真照（利用 input
file，文件流）
这里我们利用 input 上传时的 file 对象，
附上代码：

<input type="file" id="upload">
$('#upload').on('change',function (e) {var file = e.target.files[0];
         console.log(file);
         data.append('json[0][image]',file)
     })

这个 file 对象是一个含有二进制文件，打印为：

这个对象如果直接序列化，会被转化为一个空对象，后台无法识别，最后附上 vue 版代码：

<input type="file" @click="upload" id="upload">
upload:function (e) {var file = e.target.files[0];
                // 由于时间和条件原因，这里只给小明上传一张写真照
                data.append('json[0][image]',file)
                for(var i=0,len=json.length;i<len;i++){data.append('json['+i+'][name]',json[i].name)
                    data.append('json['+i+'][age]',json[i].age)
                    data.append('json['+i+'][family][father]',json[i].family.father)
                    data.append('json['+i+'][family][mother]',json[i].family.mohter)
                    for(var j=0,len2=json[i].skills.length;j<len2;j++){data.append('skills['+i+']['+j+']',json[i].skills[j])
                    }
                }
                axios.post(api.sendJSON,data,{
                    headers: {"Content-Type": "multipart/form-data"}
                }).then(function (res) {console.log(res);
                }).catch(function (error) {console.log(error);
                })
            },
退出移动版