FormData
简介:FormData
接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send()
方法送出,如果发送请求时的编码类型被设为 "multipart/form-data"
,它会使用和表单一样的格式
基本使用:
const formData = new FormData();
formData.append('name1', value1);
formData.append('name2', value2);
var http = new XMLHttpRequest();
http.open("POST", "url");
oReq.send(formData);
使用FormData,进行Ajax请求时,会自动将其转换为form-data格式,即
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryQvAh8Ufmk41iWFQn,并且参数值均被转换为字符串格式。Content-Type默认值为application/x-www-form-urlencoded。
multipart/form-data
是基于post方法来传递数据的,一般用来文件上传,并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式。另外,该格式会生成一个boundary
字符串来分割请求头与请求体。
请求体格式如下:
普通对象转FormData格式:
function objectToFormData (obj, form, namespace) {
const fd = form || new FormData();
let formKey;
for(var property in obj) {
if(obj.hasOwnProperty(property)) {
let key = Array.isArray(obj) ? '[]' : `[${property}]`;
if(namespace) {
formKey = namespace + key;
} else {
formKey = property;
} // if the property is an object, but not a File, use recursivity.
if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
objectToFormData(obj[property], fd, formKey);
} else { // if it's a string or a File object
fd.append(formKey, obj[property]);
}
}
}
return fd;
}
FileReader
简介:FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File
或 Blob
对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>
元素上选择文件后返回的FileList
对象,也可以来自拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()
方法后返回结果
FileReader属性:
FileReader.error | 一个DOMException ,表示在读取文件时发生的错误 |
FileReader.readyState | 0: 代表EMPTY,还没有加载任何数据 1: 代表LOADING,数据正在被加载 2: DONE,已完成全部的读取请求 |
FileReader.result | 文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。 |
FileReader事件:
FileReader.onabort | 处理abort 事件。该事件在读取操作被中断时触发。 |
FileReader.onerror | 处理error 事件。该事件在读取操作发生错误时触发 |
FileReader.onload | 处理load 事件。该事件在读取操作完成时触发。 |
FileReader.onloadstart | 处理loadstart 事件。该事件在读取操作开始时触发。 |
FileReader.onloadend | 处理loadend 事件。该事件在读取操作结束时(要么成功,要么失败)触发。 |
FileReader.onprogress | 处理progress 事件。该事件在读取Blob 时触发。 |
FileReader方法:
FileReader.abort() | 中止读取操作。在返回时,readyState 属性为DONE 。 |
FileReader.readAsArrayBuffer() | 开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. |
FileReader.readAsBinaryString() | 开始读取指定的Blob 中的内容。一旦完成,result 属性中将包含所读取文件的原始二进制数据。 |
FileReader.readAsDataURL() | 开始读取指定的Blob 中的内容。一旦完成,result 属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。 |
FileReader.readAsText() | 开始读取指定的Blob 中的内容。一旦完成,result 属性中将包含一个字符串以表示所读取的文件内容。 |
基本使用:
const fileData = fileList[0];
var reader = new FileReader();
reader.readAsDataURL(fileData);
const file = reader.result.split(',')[1];
let condition = Object.assign({},{file,type: 1})
以对象方式发送
请求头为Content-Type: application/json,请求方法为POST
请求体为: