1.FormData 对象的使用:
- 用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装 成一个queryString
- 异步上传二进制文件。
2.使用
1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。
let formData = new FormData()
formData.append('user', 'zhang')
获取 formData.get('user') //zhang
删除 formData.append('user')
复制代码
2.使用FormData对象发送文件 在文件上传时
<input type="file" accept="image/*"
@change="onFileChange" >
复制代码
在选择文件上传时,使用FormData对file进行处理,然后再发送给后端接口,即可实现文件的上传。
onFileChange(e){
let files = e.target.files || e.dataTransfer.files;
// 通过FormData将文件转成二进制数据
let formData = new FormData();
// 将文件转二进制
formData.append('upload',files[0])
axios.post(formData,url).then(function(){})
}
// 监听文件上传的进度
let onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
progress.style.width = percent;
}
复制代码
3.input文件上传,移动端调用相机
<input type="file" accept="image/*" capture="camera" />
<!--可调用相机或相册-->
<input type="file" accept="image/*" />
复制代码