JS實現本地檔案上傳至阿里雲伺服器

前言

      在前面的部落格中，實現了JS將本地圖片檔案預覽並上傳至阿里雲伺服器的操作。這次需要實現將本地打包好的檔案上傳至阿里雲伺服器。使用前面的圖片檔案上傳方法無法完成此操作。操作介面如下:

思路

      本地與服務端傳輸檔案的格式應該是熟悉的Base64格式。首先需要將本地檔案轉換為Base64格式，傳輸至服務端後，在服務端再將Base64格式的檔案轉換為原始檔案。

原始碼解析

控制器

/*--------------移動APP版本管理G030 G031-------------------------*/
medModule.controller('VersionController',function($scope, $http){
$scope.queryFun = function() {
try{
appCallServer($http,"G030",{"mangid":localStorage.mangid
},
//success function
function(data){
$scope.currentVersion = data.version;
},
//fail function
function(data){
//alert("未找到記錄:"+data.errtext);
});
}catch(error){
alert("G030:"+error.message);
}
};
$scope.queryFun();
// 上傳檔案
$scope.doTx = function() {
var appBase64 = document.getElementById("appBase64").innerHTML;	// 獲取檔案Base64編碼內容
var sunny = document.getElementById("appName").innerHTML;	// 獲取檔名稱(PS:瞬間感覺自己好聰明啊~~)
var appName = sunny.substr(0, sunny.length-4); // 獲取子字串。
/*alert(appBase64);
alert(appName);*/
if(appBase64.length == 0){
alert("請選擇有效檔案[該檔案為空]");
}
try {
appCallServer($http, "G031", {
"mangid"   : localStorage.mangid,
"appBase64": appBase64,
"appVersion"  : appName
},
// success function
function(data) {
alert("上傳檔案成功");
},
// fail function
function(data) {
alert("上傳檔案失敗:" + data.errtext);
});
} catch (error) {
alert("G031:" + error.message);
}
};
});
 

Html指令碼

<script type="text/javascript">  
function loadAppFile(source) {
var file = source.files[0];
if (window.FileReader) {
var fr = new FileReader();
// onloadend讀取完成觸發，無論成功或失敗.如果讀取失敗，則 result的值為 null，否則即是讀取的結果
fr.onloadend = function(e) {
var content = e.target.result;
if(content != null){
var arr = content.toString().split(",");
// 將檔案Base64編碼內容傳至頁面
document.getElementById("appBase64").innerHTML = arr[1];
// 獲取圖片名稱(PS:瞬間感覺自己好聰明啊~~) 
document.getElementById("appName").innerHTML = document.getElementById("appInput").files[0].name;
/* alert(document.getElementById("appInput").files[0].name);
alert(document.getElementById("appName").innerHTML);
alert(document.getElementById("appBase64").innerHTML); */
}
};
fr.readAsDataURL(file);
}
}
</script>
 

服務端接收程式碼

/************************* 更新移動APP版本資訊 *************************/
public static boolean do_G031(RequestMessage request,ResponseMessage response){
logger.info("\n\n------------Update_APP_G031 debug info-------------\n請求資料包資訊:" + request.json.toString());
if(!Pubf.checkMangSession(request,response)){
return(false);
}
try{
String app,version;
app	= request.getString("appBase64").trim();
version	= request.getString("appVersion").trim();
/*--------------------------- 將應用存進服務端 ---------------------------*/
if(!app.equals("")){
logger.info("開始寫檔案.....");
FileUtil.GenerateApp(app, MyConst.APP_FILE_PATH + version + ".wgt");
logger.info("寫檔案完成.....");
/*-------------------------將應用版本號寫進版本檔案--------------------------*/
logger.info("開始寫入版本號.....");
FileUtil.writeFile(MyConst.APP_VERSION_FILE_PATH, version);
logger.info("寫版本號完成.....");
return(true);
}else{
return(false);
}
}catch(Exception e){
e.printStackTrace();
response.errtext = "移動APP更新失敗";
response.result  = MyConst.ERR_FORMAT;
return(false);
}
}
 

工具類

<pre name="code" class="java">/**
 * 
 * @param appStr 應用內容
 * @param appFilePath 應用存放路徑
 * @return
 */
public static boolean GenerateApp(String appStr, String appFilePath) { // 對位元組陣列字串進行Base64解碼並生成wgt更新包
if (appStr == null) // 檔案資料為空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解碼
byte[] b = decoder.decodeBuffer(appStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 調整異常資料
b[i] += 256;
}
}
// 生成wgt應用
OutputStream out = new FileOutputStream(appFilePath);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}

讀取到的檔案內容如下:

      由上圖可見，其編碼方式正是我們之前所說的Base64編碼方式。那麼接下來的工作就很好做了。按照之前圖片處理的思路即可。

      期間自己也遇到了一部分問題。例如

<i id="appBase64" hidden="hidden"></i>

<i id="appName" hidden="hidden"></i>

      隱藏元素的位置，儘量將其置於靠近提交Buton的附近，否則在控制器中獲取不到其內容。

      經過以上步驟，就可以實現將更新包上傳至服務端相應更新資料夾中，同時將更新包版本號資訊寫入相應的version.txt檔案內。

程式碼領悟

       將以上程式碼與之前做過的圖片上傳做對比，發現兩者在資料獲取時的方式是不同的，本文使用了。之前做圖片上傳時應用此方法亦可以解決問題。兩者寫入服務端的方法是相同的，均是將Base64編碼內容寫入檔案中。思路清晰了，問題自然會很容易得到解決。

進一步優化

      幸福永不滿足，在以上檔案上傳過程中會遇到較大檔案的上傳，為此可能需要等待1min，甚至若干分鐘，這是讓人無法忍受的事情。為了增強使用者的使用體驗。特為檔案上傳增加進度條美化效果。詳情見下篇部落格。

參考文獻

鳴謝

美文美圖