고급 JavaScript(9) JS는 Alibaba Cloud 서버에 로컬 파일 업로드를 구현합니다.

JS는 Alibaba Cloud 서버에 로컬 파일 업로드를 구현합니다

머리말

이전 블로그에서 "JavaScript Advanced(8) JS는 이미지 미리보기 및 가져오기 서버 기능을 구현합니다"(자세한 내용을 보려면 클릭하세요) 에서는 로컬 이미지 파일을 미리 보고 Alibaba Cloud 서버에 업로드하기 위해 JS가 구현되었습니다. 이번에는 로컬로 패키지된 파일을 Alibaba Cloud 서버에 업로드해야 합니다. 이전 이미지 파일 업로드 방법으로는 이 작업을 수행할 수 없습니다. 운영 인터페이스는 다음과 같습니다.

아이디어

로컬과 서버 간에 전송되는 파일 형식은 친숙한 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 인코딩 방식이 맞습니다. 그러면 다음 일은 수월할 것이다. 이전 이미지 처리 아이디어를 따르십시오.

이 기간 동안 나에게도 몇 가지 문제가 발생했습니다. 예를 들어