欣农实习日记 6.8

知识点一：FormData

FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。

基础示例：

//原生js上传文件
//获取按钮
var btn = document.querySelector('[type=button]');
//绑定事件
btn.onclick = function () {
     // 文件元素
    var file = document.querySelector('[type=file]');
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    // 将文件转二进制
    formData.append('upload', file.files[0]);
	//创建XMLHttpRequest，用这个来发送数据
    var xhr = new XMLHttpRequest;
    /*初始化HTTP请求参数(请求方式,url,是否同步)*/
    xhr.open('post', 'file.php');
	
	/*
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	设置请求头的contentType
	*/
	
    // 监听上传进度
    xhr.upload.onprogress = function (ev) {
    // 事件对象
    // console.log(ev);
 
        var percent = (ev.loaded / ev.total) * 100 + '%';
 
        console.log(percent);
 
        progress.style.width = percent;
    }
 
    xhr.send(formData);
 
    xhr.onreadystatechange = function () {
    //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 
            if(xhr.readyState == 4 && xhr.status == 200) {
            }
    }
}

关于 FromData 的基础操作API具体参考： blog.csdn.net/weixin_4605…

知识点二： axios API之 onUploadProgress

用于处理原生进度事件，一般项目中通过回调函数，获取进度百分比，制作上传进度条

const config = {
	onUploadProgress: (progress) => {
		// 格式化成百分数
		this.progress = Math.floor(progress.loaded/progress.total*100) + '%'
	}
}
axios.post(url,data,config).then(...)

• progress.loaded表示当前上传的数据大小，progress.total表示整个要上传的数据大小。拿到当前上传数据的百分比后传给 Element 的进度条组件即可实现。
• XMLHttpRequest 本身就支持 progress 事件（待了解...），ajax 可以添加事件监听

知识点三： :before 选择器

向选定的元素前插入内容，常用于给卡片组件左上角修饰