之前做圖片上傳的時候，採用的方案是在js前端壓縮成一大一小兩張base64圖片，然後上傳到我們的服務器上，轉換成爲jpeg格式後上傳到七牛圖片服務器上。之所以一開始沒有采用七牛提供的js直接上傳到七牛服務器，主要是考慮圖片的安全，後來研究了一下，發現七牛是有自己的安全機制的。採用token對每一張圖片上傳授權。從減小服務器流量的角度考慮，預研了一次七牛js上傳七牛服務器。
首先研究的是七牛提供的js上傳api，首先否定了這個方案，理由如下。1.他提供的的庫太大了，需要引用的兩個庫加起來100多K，對於移動應用太大了。2.它是關聯input-file後響應上傳，上傳的也是選擇的文件，不會上傳我們的壓縮文件。
緊接着研究了一下nodejs方式的上傳，考慮前端引用node服務端的代碼，發現引用不了，放棄。
研究了一下七牛文檔，發現上傳文件就是提交一個form表單。於是研究如何用js異步提交表單，首先想到的是jquery.form.js。雖然可以異步提交表單，但是如何提交文件是個問題。後來發現七牛提供了base64圖片上傳的接口，測試了一下，發現上傳不了，放棄。後來嘗試了FormData，發現採用這個方案文件可以正常提交到七牛服務器上，上傳代碼如下。
function putb64(key, token, file){
var oMyForm = new FormData();
oMyForm.append("key", key);
oMyForm.append("token", token);
oMyForm.append("file", file);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://upload.qiniu.com");
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
alert(oReq.responseText);
} else {
alert(oReq.status);
}
};
oReq.send(oMyForm);
}
接下來測試前端引用上傳的圖片，發現圖片直接引用是沒有效果的，非得我ajax加載圖片內容後將img的src替換纔可以生效。但是這就有個圖片緩存的問題了，畢竟動態加載的內容是沒有辦法做圖片緩存的。用戶每次打開網頁，都得將所有圖片動態加載一次，這個很難接受，畢竟讀新聞是大多數情況，寫新聞上傳圖片是少數行爲，於是放棄了用js直接上傳七牛服務器，還是採用原來的方式。
過後想明白了七牛爲什麼不提供一個正常的上傳base64圖片的接口了，就是因爲圖片的引用有問題，他們本來開發了這個功能，發現用不了，於是不讓用戶提交成功了