在使用ant design开发后台业务过程中，遇到了给upload组件配置后台服务器的问题。因为用习惯了七牛云的快速易用，以及喜欢它的自动压缩接口，因此第一反应就是想怎么配置上传到七牛云上面。
nodejs的实现，发现很久没有维护了，存在一些问题。于是只能从阅读ant design源代码来看能不能怎么修改upload的上传方式，从而实现提交图片过去。 首先从可以看到，它是基于编写的。再看该upload组件，得到具体的:
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 git@github.com: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"); } })})
通过审阅其中的核心逻辑可以知道，*它的上传逻辑与antd 的upload组件的核心区别就是formData增加了七牛云上传token:
formData.append('token', token); 而通过upload的request源码又可以知道，可以通过option.data传过来的参数执行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组件上传图片到七牛云：
const QINIU_SERVER = 'http://up.qiniu.com'data = { token: 'PUT-YOUR-TOKEN-HERE', } {uploadButton} 最后划重点：
- action=''
- data={ token: 'PUT-YOUR-TOKEN-HERE' }
BTW, 如果使用的是七牛云其他地区如华南地区的Bucket，需要替换使用其他地区的上传域名进action,具体可参考。
Enjoy it!