单文件和多文件和base64文件上传

什么是FormData对象

简单介绍下 FormData是XMLHttpRequest Level 2 新增的一个对象，可以用来提交表单，它是一种表示表单数据的键值对key/value的构造方式，可以轻松的将数据发送给后端。

我们先试下如何提交表单

<form id="form">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <input type="text" name="phone" placeholder="请输入手机号码">
</form>
<button onclick="handleSubmit()">提交</button>

let form = document.getElementById('form');
function handleSubmit() {
  let formData = new FormData(form);
  formData.append('phone', 15258326200)
  console.log('获取输入的用户名', formData.get('username'));
  console.log('获取输入的密码', formData.get('password'));
  console.log('获取输入的手机号码', formData.get('phone'));
  // 最后我们把formData传给后端接<口
}

其实现在大多数都是用vue来双向绑定数据，直接使用append来添加this.xxx数据进去，再传给后端接口

下面我们来说下FormData常用方法

formData.append("sex", 18);//增加一个key值为sex的数据
formData.get("username"); // 获取key为username的第一个值
formData.getAll("phone");// 获取key为phone的所有值，返回值为数组类型  例如我们添加了用append方法添加了多次值  如：formData.append('phone', '这里是手机号码') 就会返回出来所有的数据
formData.set("username", "xiaoxu") //将username对应的键值改为xiaoxu
formData.has("username") //true,表示含有username的数据
formData.delete("username") //删除键名为username的数据

了解完上面的知识后我们来实战下

单文件上传

先说下单文件和多文件上传的思路

1. 创建FormData对象
2. 从事件对象中拿到上传的文件对象
3. 使用append方法添加到FormData对象中，最后传给后台接口
4. 多文件的话是直接循环文件对象再添加到FormData对象中

<input type="file" id="file" onchange="handleUpload(event)">

let formData = new FormData();
let files = {};//定义对象来接收单个文件对象
function handleUpload(e) {
  files = e.target.files[0];
  formData.append("files", files); // 文件对象
  console.log(formData.get('files')); //上传的单个文件对象
}

从文件对象中拿到数据再添加到formData对象中，因为一个文件，所以取数组中索引值为第0个的数据就可以

我们也可以通过document.getElementById获取dom，然后再绑定onchange的写法

<input type="file" id="file">

let fileDom = document.getElementById("file");
fileDom.onchange = function (e) {
  console.log('拿到的文件对象', e.target.files[0]);
}

多文件上传

<input type="file" id="file" multiple="multiple" onchange="handleUpload(event)">

let fileDom = document.getElementById("file");
let formData = new FormData();
let files = [];//定义数组来接收多个文件对象
function handleUpload(e) {
  files = e.target.files; //从事件对象中获取所有选择的文件   他是一个数组  里面是一个个文件对象
  // 然后开始循环我们上传的多个文件
  for (var i = 0; i < files.length; i++) {
    formData.append("files", files[i]); // 文件对象
  };
  console.log(formData.getAll('files')); //上传的所有的文件对象
}

多文件就是拿到上传的文件对象的数组，然后循环然后添加到formData对象中

使用vue方法也是一样 也是从事件对象中拿到上传的文件对象，多个文件则

<input class="file" name="file" type="file" multiple="multiple" accept="image/png,image/gif,image/jpeg" @change="update(event)" />

methods: {
  update(e) {
    let files = e.target.files;//拿到上传的文件对象
    console.log(files);
  }
}

base64文件上传

实现思路

1. 通过e.target.files拿到files对象
2. 再创建一个new一个FileReader对象，可以读取二进制对象方法
3. 然后通过readAsDataURL()方法读取我们的File对象或者是Blob对象，读取完可以执行onload方法，然后就可以拿到里面的result数据，也就是base64格式的数据

什么是FileReader对象？ MDN官网上的解释：FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

下面我们来介绍一下创建FileReader对象的实例有哪些方法：

普通方法：

方法名	参数	描述
abort	none	中断读取
readAsArrayBuffer	Blob 或 File	将文件读取为ArrayBuffer数据对象
readAsBinaryString	Blob 或 File	将文件读取为二进制码
readAsDataURL	Blob 或 File	将文件读取为 DataURL，也就是base64的格式
readAsText	Blob 或 File	将文件读取为文本

事件处理方法：

事件	描述
onbort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadstart	读取开始时触发
onloadend	读取完成触发，无论成功还是失败
onprogress	读取中

<input type="file" name="file" onchange="handleUpload(event)" />

function handleUpload(e) {
  // 定义变量接收参数中的文件信息
  let file = e.target.files[0];
  // 这是后需要创建一个FileReader对象
  var reader = new FileReader();
  // 通过readAsDataURL读取文件对象    也就是使用readAsDataURL转换成base64的格式   读取成功后在onload方法中就可以接收到  注：readAsDataURL方法可以读取指定的Blob或File对象
  reader.readAsDataURL(file);
  // 然后通过onload事件里接收里面的result  onload是读取成功时触发
   reader.onload = (e) => {
    console.log('base64格式文件', reader.result) //获取的base64的图片  直接传给后台
  }
}