前端文件上传

文件上传分为单文件上传、多文件上传、base64文件上传

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

<form id="myForm">
  <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('myForm');
function handleSubmit() {
  let formData = new FormData(form);
  formData.append('phone', 17621658180)
  console.log('获取输入的用户名', formData.get('username'));
  console.log('获取输入的密码', formData.get('password'));
  console.log('获取输入的手机号码', formData.get('phone'));
  // 最后把formData传给后端
}

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的数据

单文件上传

• 创建FormData对象
• 从事件对象中拿到上传的文件对象
• 使用append方法添加到FormData对象中，最后传给后台接口

// 从文件对象中拿到数据再添加到formData对象中，因为一个文件，所以取数组中索引值为第0个的数据就可以
<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')); //上传的单个文件对象
}

// 我们也可以通过document.getElementById获取dom，然后再绑定onchange的写法
<input type="file" id="file">
let fileDom = document.getElementById("file");
fileDom.onchange = function (e) {
  console.log('拿到的文件对象', e.target.files[0]);
}

多文件上传

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

<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')); //上传的所有的文件对象
}

base64文件上传

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

<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的图片  直接传给后台
  }
}