众插件不支持同步,也是没办法的事情,具体为啥就不分析了,确实搞不懂。

一直用vue-resource的post,觉得很舒服。

然,没办法只能仿造一个,自己提供一个同步方法

几个点先摆清楚

1. .then()方法:几经百度,原来是Promise套路,原谅我的无知,可能不是什么新鲜事物,不晓得的同学自己百度一下吧。不是很复杂。

2. formdata,用法满天飞,搞到最后也是晕乎乎,毕竟模拟Form提交时并没有太深层的嵌套数据结构,基本上是值对,like name = 'zhang' gander = '1' 这种的数据。对于比较深层的嵌套数据,一脸蒙蔽的百度不到解法。举个例子{list:[{a:1,b:2},{a:2,b:1}]},一句话,也是个鸡肋。(没深究,莫笑愚浅薄,脑袋不够用)

3. 额,第三是啥来着,二胡了,算了。

想仿造先分析,说实话写这个文压力有点大,可能有更简洁的办法去分析,哥不会。

按理说,去看源码应该是最省事的,没准还能找到一步到位的方法,哥早已经被源码绕晕了,原来js还能那么写,大神!!

还是按照哥的套路来吧。

1. 数据:formdata数据,并不一定要用FormData去造,这是我最先想到的。跟踪一下,什么秘密都没有。

formdata 结构就是如此,点 view source 有更详细的源码

不要怕,看到这些应该高兴才是,这是encodeURIComponent的结果,可以用decodeURIComponent来翻译

list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=error_tips.mp3&list[][extension]=mp3&list[][filename]=error_tips&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=file_remove.mp3&list[][extension]=mp3&list[][filename]=file_remove&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=folder_open.mp3&list[][extension]=mp3&list[][filename]=folder_open&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png&list[][dirname]=D:/xampp/htdocs/wnds/sound&list[][basename]=recycle_clear.mp3&list[][extension]=mp3&list[][filename]=recycle_clear&list[][isSelected][value]=true&list[][type]=file&list[][img]=images/file_icon/icon_file/file.png

你看,翻译完了,就都清楚了,这是一个字符串,配合类结构可以知道,这是每个变量的串接。

list[0][dirname]=D:/xampp/htdocs/wnds/sound
细看这个,这是一个变量和它的路径的表示,这个变量值位于整个数据中的路径就是前面的各种下标和名称。
请注意,我把路径一词加大了,这就是一个路径问题。通过一系列嵌套计算,就可以得到的。
也就是说,formdata的数据结构就是 路径 = 值 & 路径 = 值 分析到这里,一切都是那么的宁静安详,预示着,问题解开了。(问题不是关键,关键是分析的过程,啊哈哈哈哈) 那么如何去构造它呢?
一个函数足以搞定
function trans(data,key = ''){
var ret = ""
if(typeof data == 'object'){
for(let it in data){
ret += trans(data[it],key + (key == ''?it:"["+ it + "]"))
}
}else if(Array.isArray(data)){
for(var i = 0;i < data.length;i++){
ret += trans(data[i],key + "[" + i + "]")
}
}else{
ret +=encodeURIComponent( key) + '=' + encodeURIComponent(data) + "&"
}
return ret
}

简单伐?

几点注意,都是我填坑填出来的。

1. 最外层是没有[]的,所有路径最外层是没有[]的表示一个数组的名称。

2. 所有=都没有被翻译成urlstring

如此

最大的问题解决了,我们构造了一个formdata,那么将这个formdata传出去即可了。

完整的代码分享一下,请不要学我的不规范,完成自己的js文件

var gp = {
get: function(url) {
return this._get(url, true)
},
synget: function(url) {
return this._get(url, false)
},
_get: function(url, syn) {
const promise = new Promise(function(resolve, reject) {
const handler = function() {
if(this.readyState !== 4) {
return;
}
if(this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
var request = new XMLHttpRequest()
request.open('GET', url, syn)
request.onreadystatechange = handler
request.send(null)
})
return promise
},
post: function(url, data) {
return this._post(url, data, true)
},
synpost: function(url, data) {
return this._post(url, data, false)
},
_post: function(url, data, syn) {
const promise = new Promise(function(resolve, reject) {
const handler = function() {
if(this.readyState !== 4) {
return;
}
if(this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
var request = new XMLHttpRequest()
request.open('POST', url, syn)
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
request.onreadystatechange = handler var ret = gp._trans(data) request.send(ret.substr(0,ret.length-1))
})
return promise
},
_trans : function(data,key = ''){
var ret = ""
if(typeof data == 'object'){
for(let it in data){
ret += gp._trans(data[it],key + (key == ''?it:"["+ it + "]"))
}
}else if(Array.isArray(data)){
for(var i = 0;i < data.length;i++){
ret += gp._trans(data[i],key + "[" + i + "]")
}
}else{
ret +=encodeURIComponent( key) + '=' + encodeURIComponent(data) + "&"
}
return ret
}
}

仿造vue-resource的formdata传对象的更多相关文章

  1. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  2. FormData js对象的介绍和使用

    FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...

  3. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  4. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  5. nuxtjs在vue组件中使用window对象编译报错的解决方法

    我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...

  6. vue多文件上传进度条 进度不更新问题

    转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...

  7. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  8. onclick传对象

    用onclick传对象的时候,用jquery无法进行操作 onclick=(this) 接收到参数后只需要转化一下 console.log($(obj).html());

  9. 小程序-formdata传参

    项目背景,后端接口要求formData传参: 在util.js文件中封装转化函数,代码如下: const formatTime = date => { const year = date.get ...

随机推荐

  1. June 15th 2017 Week 24th Thursday

    Whatever is worth doing is worth doing well. 任何值得做的,就把它做好. Whatever is worth doing is worth doing we ...

  2. 比較全的XML系列工具 能够轻松实现排版、转换和打印!

    XML系列 --------------------------------------------------------------------------------1.Xsl Formatte ...

  3. C# 利用HttpWebRequest进行HTTPS的post请求的示例

    最近一个推送信息的目标接口从http格式换成https格式,原来的请求无法正常发送,所以修改了发送请求的方法.标红的代码是新加了,改了之后就可以正常访问(不检测证书的) public static s ...

  4. python序列化_json,pickle,shelve模块

    序列化 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes 把内存数据 转成字符,叫序列化 把字符 转成内存数据,叫反序列化 模块 ...

  5. 通过ajax给后台提交数据时,radio性别数据的获取

    通过ajax向后台异步发送数据,经常我们会遇到个人信息额提交,一般我们采用FormData来装数据.在装性别值得时候,我们会有两个radio框,获取radio值得方法如下: 一般情况下,一个radio ...

  6. ECMAScript6

    ECMAScript6介绍 # ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现 # 有利于保证这门语言的开放性和中立性. # 标准在每年的 6 月份正 ...

  7. 两台电脑在不同情况下ping的情况

    两台计算机(交叉连接) 同一网段 ,可以ping通.不同网段,不可以 两台计算机通过一台交换机连接 同一网段 ,可以ping通.不同网段,不可以.同一网段,同一Vlan,不可以. 综上:跨网段通信,必 ...

  8. Swift 中关于”??”操作符

    Swift 中关于”??”操作符 Swift 的语法在保证安全和健壮的基础上,又带有很多非常灵活的特性,比如 ?? 操作符就是其中一个.大家可能已经了解它,也可能有些同学不了解它,这里给大家整理了关于 ...

  9. zepto 基础知识(6)

    101.$.ajax $.ajax(options) 类型:XMLttpRequest 执行Ajax请求.他可能是本地资源,或者通过支持HTTP access control的浏览器 或者通过 JSO ...

  10. 构建高可靠hadoop集群之2-机栈

    本文主要参考 http://hadoop.apache.org/docs/r2.8.0/hadoop-project-dist/hadoop-common/RackAwareness.html had ...