ant-design-vue/components/vc-upload/src/request.js

98 lines
2.3 KiB
JavaScript
Raw Normal View History

2019-01-12 11:33:27 +08:00
function getError(option, xhr) {
const msg = `cannot post ${option.action} ${xhr.status}'`;
const err = new Error(msg);
err.status = xhr.status;
err.method = 'post';
err.url = option.action;
return err;
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
function getBody(xhr) {
const text = xhr.responseText || xhr.response;
2018-04-11 15:17:34 +08:00
if (!text) {
2019-01-12 11:33:27 +08:00
return text;
2018-04-11 15:17:34 +08:00
}
try {
2019-01-12 11:33:27 +08:00
return JSON.parse(text);
2018-04-11 15:17:34 +08:00
} catch (e) {
2019-01-12 11:33:27 +08:00
return text;
2018-04-11 15:17:34 +08:00
}
}
// option {
// onProgress: (event: { percent: number }): void,
// onError: (event: Error, body?: Object): void,
// onSuccess: (body: Object): void,
// data: Object,
// filename: String,
// file: File,
// withCredentials: Boolean,
// action: String,
// headers: Object,
// }
2019-01-12 11:33:27 +08:00
export default function upload(option) {
const xhr = new window.XMLHttpRequest();
2018-04-11 15:17:34 +08:00
if (option.onProgress && xhr.upload) {
2019-01-12 11:33:27 +08:00
xhr.upload.onprogress = function progress(e) {
2018-04-11 15:17:34 +08:00
if (e.total > 0) {
2019-01-12 11:33:27 +08:00
e.percent = (e.loaded / e.total) * 100;
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
option.onProgress(e);
};
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
const formData = new window.FormData();
2018-04-11 15:17:34 +08:00
if (option.data) {
Object.keys(option.data).map(key => {
2019-01-12 11:33:27 +08:00
formData.append(key, option.data[key]);
});
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
formData.append(option.filename, option.file);
2018-04-11 15:17:34 +08:00
2019-01-12 11:33:27 +08:00
xhr.onerror = function error(e) {
option.onError(e);
};
2018-04-11 15:17:34 +08:00
2019-01-12 11:33:27 +08:00
xhr.onload = function onload() {
2018-04-11 15:17:34 +08:00
// allow success when 2xx status
// see https://github.com/react-component/upload/issues/34
if (xhr.status < 200 || xhr.status >= 300) {
2019-01-12 11:33:27 +08:00
return option.onError(getError(option, xhr), getBody(xhr));
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
option.onSuccess(getBody(xhr), xhr);
};
2018-04-11 15:17:34 +08:00
2019-01-12 11:33:27 +08:00
xhr.open('post', option.action, true);
2018-04-11 15:17:34 +08:00
// Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
if (option.withCredentials && 'withCredentials' in xhr) {
2019-01-12 11:33:27 +08:00
xhr.withCredentials = true;
2018-04-11 15:17:34 +08:00
}
2019-01-12 11:33:27 +08:00
const headers = option.headers || {};
2018-04-11 15:17:34 +08:00
// when set headers['X-Requested-With'] = null , can close default XHR header
// see https://github.com/react-component/upload/issues/33
if (headers['X-Requested-With'] !== null) {
2019-01-12 11:33:27 +08:00
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
2018-04-11 15:17:34 +08:00
}
for (const h in headers) {
if (headers.hasOwnProperty(h) && headers[h] !== null) {
2019-01-12 11:33:27 +08:00
xhr.setRequestHeader(h, headers[h]);
2018-04-11 15:17:34 +08:00
}
}
2019-01-12 11:33:27 +08:00
xhr.send(formData);
2018-04-11 15:17:34 +08:00
return {
2019-01-12 11:33:27 +08:00
abort() {
xhr.abort();
2018-04-11 15:17:34 +08:00
},
2019-01-12 11:33:27 +08:00
};
2018-04-11 15:17:34 +08:00
}