formData、请求头

某些小程序得的接口中,要求传 formdata 的数据,才发现 原生 js 里的 windows 对象还有那么多东西..

FormData 对象

https://www.jb51.net/article/89998.htm

– formdata 上传的是二进制文件,是通过 js 来模拟一系列表单控件。

  • formdata 对象,可以把所以表单的 name 和 value 组成一个 queryString(后端处理的) ,提交后台,并且用 formdata 对象提交的可以减少拼接 queryString 的工作量。
  • querySting 就是 http 查询字符串 query? xxxx 这后面的值
  • 当有不安全值时, 浏览器或把 queryString 加密为 16 进制传输。 并放入 QUERY_STRING 这个环境变量中。Request.QuerySting 方法就是从这个环境变量中取相应的值。

**创建  **

== 也可以在已有表单数据的基础上,继续添加新的键值对

– 使用 FormData 对象上传文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( );
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
$.ajax({
type : 'post',
url : '#',
data : formdata,
cache : false,
processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType : false, // 不设置Content-type请求头
success : function(){}
error : function(){ }
})

== 微信小程序

没有 formdata 对象

因为小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 windowdocument 等。

  • **但使用  ** wx.uploadFile 可以传送 formdata

**    **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.uploadFile({
url: this.baseUrl + "/api/real/photoUpload",
filePath: res.tempFilePaths[0],
name: "file",
headers: {
"X-xxxxx-Client": this.user.token, //这是要token
"Content-Type": "multipart/form-data", //********划重点
},
formData: {
//********划重点
phone: this.user.phone,
photoType: 3,
},
success: (res) => {},
});

** **小程序使用  **wx.request 发送 multipart/form-data 请求的方法**

https://developers.weixin.qq.com/community/develop/article/doc/0000cc0e5bc5d093c6f8be17254c13

== 发送 formdata  需要配置这个请求头

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.request({
url: "test.php", //仅为示例,并非真实的接口地址
data: {
x: "",
y: "",
},
header: {
"content-type": "application/x-www-form-urlencoded", //修改此处即可
},
success(res) {
console.log(res.data);
},
});

————————————————

发送 http 请求 一般要携带 headle 请求头

请求头有不少类型,都是关键字,没有提示就是有点打脑壳

== 主要先说两种

  • AuthToken: 一般存放认证 token 之类的
  • Content-Type –描述数据发送端,发送数据的数据类型
    • post 请求肯定要发送数据包; 所以只能发送以下几种类型
    • application/x-www-form-urlencoded,
      • 参数必须需要转为querystring
    • application/json
    • multipart/form-data => 上传
    • 或 text/plain 中的一种。
    • 其他的均不常见。

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!