资讯专栏INFORMATION COLUMN

使用js FormData传文件流,传json(重点)

qylost / 3616人阅读

摘要:下边举个例子,大家就明白了好了,请上我们的两位同学,小明和胖虎,你们就不用发言了,我会以的形式介绍你们的情况和个人癖好,请坐。

先介绍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

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


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

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

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


upload:function (e) {
                var file = e.target.files[0];
                //由于时间和条件原因,这里只给小明上传一张写真照
                data.append("json[0][image]",file)
                for(var i=0,len=json.length;i           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105061.html

相关文章

  • 七牛 js JDK使用 - 上APP

    摘要:背景介绍使用将包括安卓和上传到七牛上传所以不考虑数据处理使用后台得到七牛上传基于下面不详述如何使用参见七牛上传的简单案例也不详述,参见官网事例很清楚了。指定上传的目标资源空间和资源键的长度最大为字节。,表示只允许用户上传指定的文件。 背景介绍 使用JS将APP(包括安卓和IOS)上传到七牛 (上传APP所以不考虑数据处理) uptoken使用JAVA后台得到 七牛上传基于pluplo...

    elva 评论0 收藏0
  • antd 和 element上文件详解与FormData详解

    摘要:当用户完成选择文件动作时,提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象,异步的实现是通过一个对象,一般简称该对象对。这些回答基于自己理解,如有不妥,希望路过的大神轻喷,指正。 背景 平时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件。 我们分别来看一下element 和 antd 手动上传怎么处理:...

    Fundebug 评论0 收藏0
  • 基于Vue + Node.js + MongoDB的图片上组件,实现图片的预览和删除

    摘要:网址功能单图多图上传图片上传预览上传进度条分组上传,分组查询新建分组,删除分组删除图片选择图片目录结构前端利用搭建,中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下。演示在网址打开后的show.gif中。 使用技术:Vu...

    hzx 评论0 收藏0
  • 微信小程序学习与wepy框架的使用详解

    摘要:,至此咱们的微信小程序的简单使用及了解算是分享完了,毕竟个人也是道行有限,没有钻研太深,这些只是本人在实际项目开发过程中用到和总结的经验,有太多不足或不对的地方,希望大家多多给予指出与改正,咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用,在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度,然而就是因为它的备受欢迎度以及越来越被企业所重视,也就形成了咱们开...

    sf190404 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<