文件上传分为单文件上传、多文件上传、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的图片 直接传给后台
}
}
