ivew 的ajax,iView-Upload组件分析

源码分析

xhr相关知识点

Ajax要点分析

拖拽事件以及粘贴事件

具体实现

总结

xhr相关知识点

XMLHttpRequest.upload 属性返回一个 XMLHttpRequestUpload对象，用来表示上传的进度。

通过onprogress属性进行监听,是在 XMLHttpRequest 完成之前周期性调用的函数。

xhr.upload.onprogress = function progress(e) {

event.loaded 已传输的数据量

event.total 总共的数据量

if (e.total > 0) {

e.percent = e.loaded / e.total * 100;

}

};

复制代码

XMLHttpRequestEventTarget.onload 是 XMLHttpRequest 请求成功完成时调用的函数。使用该属性使得判断更加简单

使用onreadystatechange属性

xhr.onreadystatechange = function () {

if(xhr.readyState === XMLHttpRequest.DONE) {//当前状态码为'DONE'(4),表示下载操作已完成

console.log(xhr.responseText)

}

使用onload属性

xhr.onload = function onload() {

...

};

复制代码

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。

信息响应(100-199)

成功响应(200-299)

重定向(300-399)

客户端错误(400-499)

服务器错误(500-599)

Ajax的封装

源码链接 github.com/ElemeFE/ele…

该源码不考虑IE低版本的情况，即ActiveXObject不在考虑范围。

创建一个FormData对象，将相关的数据进行添加，包括文件

const formData = new FormData();

if (option.data) {

Object.keys(option.data).map(key => {

formData.append(key, option.data[key]); //通过遍历添加新的属性值

});

}

formData.append(option.filename, option.file); //添加文件

复制代码

状态码status小于200或大于等于300的状态进行错误提示

xhr.onload = function onload() {

if (xhr.status < 200 || xhr.status >= 300) {

return option.onError(getError(action, option, xhr), getBody(xhr));

}

};

复制代码

设置请求头信息，忽略headers的继承属性同时值不能为null；这里进行headers.hasOwnProperty(item)的判断，可以避免这种情况:请求中的headers继承共用headers中的请求头信息。

const headers = option.headers || {};

for (let item in headers) {

if (headers.hasOwnProperty(item) && headers[item] !== null) {

xhr.setRequestHeader(item, headers[item]);

}

复制代码

拖拽事件以及粘贴事件

拖拽事件中，对需要拖动的元素赋予draggable属性;在释放位置所在的元素上使用drop事件，同时在拖动的元素上dragover阻止默认行为以启用drop

document.addEventListener("dragover", function( event ) {

// 阻止默认动作以启用drop

event.preventDefault();

}, false);

复制代码

利用DataTransfer这个对象可以在拖拽过程中传递数据；涉及Upload组件的属性： e.DataTransfer.files在拖动操作中表示文件列表,是一个类数组

dragevent.dataTransfer.setData("text", xxx); //拖动时设置数据

dropevent.dataTransfer.getData("text"); //释放时获取数据

复制代码

粘贴事件paste: 事件处理程序可以通过调用事件的 clipboardData 属性上的 getData()访问剪贴板内容；涉及Upload组件的属性: e.clipboardData.files获取到粘贴的文件列表,同样也是一个类数组

event.clipboardData.getData()

复制代码

具体实现

Upload组件提供了3种选择文件的方式：点击，拖拽和粘贴；点击的方式通过调用原生的input点击事件，监听input上的change事件获取到文件列表；拖拽和粘贴的方式则是通过事件drop,paste直接获取到文件列表；由于在点击方式中使用的是点击input实现的，所以在单选时弹出文件选择框时已经限制只能选中一个，但是拖拽和粘贴在单选时仍然可以选择多个文件，所以需要进行过滤，保证单选模式下只能存在一个文件。校验文件格式及大小，符合条件就开始发起请求，为每个文件添加属性(uid,percentage,status...),最后，通过回调函数获取上传进度，成功请求，失败请求相关参数。

事件的处理,通过动态触发input元素的click事件，值得注意的是选择完成后，需要手动设置value值为空，保证下次选择同一文件还会触发input的change事件

//点击方式

handleClick () {

...

this.$refs.input.click();

handleChange (e) {

const files = e.target.files;

...

this.$refs.input.value = null;

//拖拽方式

onDrop (e) {

this.uploadFiles(e.dataTransfer.files);