Ant Design uploadコンポーネントの快速配置に七牛雲を使用します.
7969 ワード
ant designを使用してバックグラウンドサービスを開発する過程で、バックグラウンドサーバを構成するuploadコンポーネントの問題に遭遇した.七牛云に惯れた速さで使いやすいし、好きな自动缩インターフェースを使っているので、第一反応は七牛云にどう配置してアップロードしたいですか?いろいろ捜したが、いい解決策が見つからなかった.公式推薦参考のjQuery-File-Uploadサーバーアップロードインターフェースはいくつかのnodejsの実装をテストしました.長くメンテナンスしていないことが分かりました.問題があります.したがって、ant designソースコードを読むことから、uploadのアップロード方法をどのように修正するかを確認することができます.まずant designのuplloadコンポーネントのソースコードから見ることができます.このupladコンポーネントに基づいて作成されました.このuplloadコンポーネントを見て、具体的なrequestを得て実現します.
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;
}
function getBody(xhr) {
const text = xhr.responseText || xhr.response;
if (!text) {
return text;
}
try {
return JSON.parse(text);
} catch (e) {
return text;
}
}
// 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,
// }
export default function upload(option) {
const xhr = new XMLHttpRequest();
if (option.onProgress && 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).map(key => {
formData.append(key, option.data[key]);
});
}
formData.append(option.filename, option.file);
xhr.onerror = function error(e) {
option.onError(e);
};
xhr.onload = function onload() {
// allow success when 2xx status
// see https://github.com/react-component/upload/issues/34
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(option, xhr), getBody(xhr));
}
option.onSuccess(getBody(xhr), xhr);
};
xhr.open('post', option.action, true);
// Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
if (option.withCredentials && 'withCredentials' in xhr) {
xhr.withCredentials = true;
}
const headers = option.headers || {};
// 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) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
for (const h in headers) {
if (headers.hasOwnProperty(h) && headers[h] !== null) {
xhr.setRequestHeader(h, headers[h]);
}
}
xhr.send(formData);
return {
abort() {
xhr.abort();
},
};
}
/*
*
*
* ：
*
* 1. token。 token， ， 。
* 2. key。 token key， 。 。
* 3. ， token returnUrl returnBody，
* returnBody ， returnUrl 。
* callbackBody 。
* 4. ，
*
* ， ， token hidden true 。
*
* **********************************************************************************
* * ：
* * 1. git clone [email protected]:icattlecoder/jsfiddle
* * 2. push github
* * 3. ， http://jsfiddle.net/gh/get/jquery/1.9.1//jsfiddle/tree/master/ajaxupload
* * 4. pr
* **********************************************************************************
*/
$(document).ready(function() {
var Qiniu_UploadUrl = "http://up.qiniu.com";
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function() {
progressLabel.text("Complete!");
}
});
$("#btn_upload").click(function() {
//
var Qiniu_upload = function(f, token, key) {
var xhr = new XMLHttpRequest();
xhr.open('POST', Qiniu_UploadUrl, true);
var formData, startDate;
formData = new FormData();
if (key !== null && key !== undefined) formData.append('key', key);
formData.append('token', token);
formData.append('file', f);
var taking;
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var nowDate = new Date().getTime();
taking = nowDate - startDate;
var x = (evt.loaded) / 1024;
var y = taking / 1000;
var uploadSpeed = (x / y);
var formatSpeed;
if (uploadSpeed > 1024) {
formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
} else {
formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
}
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
progressbar.progressbar("value", percentComplete);
// console && console.log(percentComplete, ",", formatSpeed);
}
}, false);
xhr.onreadystatechange = function(response) {
if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
var blkRet = JSON.parse(xhr.responseText);
console && console.log(blkRet);
$("#dialog").html(xhr.responseText).dialog();
} else if (xhr.status != 200 && xhr.responseText) {
}
};
startDate = new Date().getTime();
$("#progressbar").show();
xhr.send(formData);
};
var token = $("#token").val();
if ($("#file")[0].files.length > 0 && token != "") {
Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
} else {
console && console.log("form input error");
}
})
}) formDataに七牛クラウドアップロードtokenが追加されました.formData.append('token', token);formData.append('token', token);を実行します.この部分のソースは以下の通りです.const formData = new FormData();
if (option.data) {
Object.keys(option.data).map(key => {
formData.append(key, option.data[key]);
});
}Uploadコンポーネントを使用すると、data APIを介してカスタムのdataに着信することができ、その後、簡潔な方法が得られ、以下のsample codeによって、Uploadコンポーネントを通して画像を7牛雲にアップロードすることができる.const QINIU_SERVER = 'http://up.qiniu.com'
data = {
token: 'PUT-YOUR-TOKEN-HERE',
}
{uploadButton}
Enjoy it!