axios - 文件上传、下载进度
axios - 文件上传、下载进度
axios onDownloadProgress
axios({
url: 'https://www.***.com/***.png',
method: 'get',
onDownloadProgress (progress) {
console.log(Math.round(progress.loaded / progress.total * 100) + '%');
}
})
axios onUploadProgress
axios({
url: URL,
method: 'post',
data: {
...params
},
onUploadProgress (progress) {
console.log(Math.round(progress.loaded / progress.total * 100) + '%');
}
})
XMLHttpRequest
ElementUi upload
export default function upload(option) {
if (typeof XMLHttpRequest === 'undefined') {
return;
}
const xhr = new XMLHttpRequest();
const action = option.action;
if (xhr.upload) {
xhr.upload.onprogress = function progress(e) {
if (e.total > 0) {
e.percent = e.loaded / e.total * 100;
}
option.onProgress(e);
};
}
const formData = new FormData();
if (option.data) {
Object.keys(option.data).forEach(key => {
formData.append(key, option.data[key]);
});
}
formData.append(option.filename, option.file, option.file.name);
xhr.onerror = function error(e) {
option.onError(e);
};
xhr.onload = function onload() {
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(action, option, xhr));
}
option.onSuccess(getBody(xhr));
};
xhr.open('post', action, true);
if (option.withCredentials && 'withCredentials' in xhr) {
xhr.withCredentials = true;
}
const headers = option.headers || {};
for (let item in headers) {
if (headers.hasOwnProperty(item) && headers[item] !== null) {
xhr.setRequestHeader(item, headers[item]);
}
}
xhr.send(formData);
return xhr;
}
Lee2