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对象可以是来自用户在一个元素上选择文件后返回的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格式的字符串以表示所读取文件的内容。
ileReader.readAsText()开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。基本使用：

//inpFile指的是input的change事件

inpFile(e){

  console.log(e.target.files[0])
  
  //如果获取到图片
  
  if(e.target.files.length>0){
  
      //构造实例函数
      
    let reader = new FileReader();
    
    // 2 调用readAsDataURL函数读取文件内容
    
    reader.readAsDataURL(e.target.files[0]);
    
    // 3 监听onload事件，读取完成触发回调函数
    
    reader.addEventListener("load", () => {
    
      // 4 获取到文件，存储到变量avatar中
      //文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
      //变量赋值
    let avatar =reader.result;
    })
  }else{
    //没获取到图片
  }

FileReader与FormData区别与使用

FormData

FileReader