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

一直用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. RPMForge介绍及安装

    网站RPMForge介绍,安装 http://wiki.centos.org/AdditionalResources/Repositories/RPMForge#head-f0c3ecee3dbb40 ...

  2. note03-计算机网络

    3. 网络层 网络层的主要协议有IP.ICMP.IGMP.ARP等: IP地址分类:ABCDE ,根据32比特位的IP中网络号所占位数进行决定IP的类型 A:0 0000000 网络号| 000000 ...

  3. Uva 10294 Polya

    #include <bits/stdc++.h> using namespace std; typedef long long LL; int gcd(int a,int b) { ? a ...

  4. 【洛谷P3811】[模板]乘法逆元

    乘法逆元 题目链接 求逆元的三种方式: 1.扩欧 i*x≡1 (mod p) 可以化为:x*i+y*p=1 exgcd求x即可 inline void exgcd(int a,int b,int &a ...

  5. 学大伟业 Day 5 培训总结

    今天讲数据结构 先从mzx大佬的ppt摘抄一段: 数据结构是计算机存储.组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合. 通常情况下,精心选择的数据结构可以带来更高的运行或 ...

  6. 12java基础继承

    26.定义类Human,具有若干属性和功能:定义其子类Man.Woman: 在主类Test中分别创建子类.父类和上转型对象,并测试其特性.   package com.hry.test; public ...

  7. Redis分布式锁的正确实现方式(Java版)

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  8. 菜鸟笔记 -- Chapter 6.2.5 代码块

    6.2.5  代码块 在编程过程中我们通常会遇到如下这种形式的程序: package democlass; public class CodeBlock { { System.out.println( ...

  9. 自定义App首次启动引导页

    代码如下 #import"ZBGuidePageView.h" @interfaceZBGuidePageView()<UIScrollViewDelegate> @p ...

  10. Django从请求到返回流程

    图1:流程图 1. 用户通过浏览器请求一个页面2.请求到达Request Middlewares,中间件对request做一些预处理或者直接response请求3.URLConf通过urls.py文件 ...