JS实现本地文件上传至阿里云服务器

举报
SHQ5785 发表于 2024/03/20 08:48:54 2024/03/20
【摘要】 前言      在前面的博客《 JavaScript进阶(八)JS实现图片预览并导入服务器功能》(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作。这次需要实现将本地打包好的文件上传至阿里云服务器。使用前面的图片文件上传方法无法完成此操作。操作界面如下:思路      本地与服务端传输文件的格式应该是熟悉的Base64格式。首先需要将本地文件转换为Base64格式,传...

前言

      在前面的博客《 JavaScript进阶(八)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文件内。

代码领悟

       将以上代码与之前做过的图片上传做对比,发现两者在数据获取时的方式是不同的,本文使用了HTML5之FileReader方法(点击查看详情)。之前做图片上传时应用此方法亦可以解决问题。两者写入服务端的方法是相同的,均是将Base64编码内容写入文件中。思路清晰了,问题自然会很容易得到解决。

进一步优化

      幸福永不满足,在以上文件上传过程中会遇到较大文件的上传,为此可能需要等待1min,甚至若干分钟,这是让人无法忍受的事情。为了增强用户的使用体验。特为文件上传增加进度条美化效果。详情见下篇博客。

参考文献

1.JavaScript进阶(八)JS实现图片预览并导入服务器功能_javascript图片预览-CSDN博客

2.IBM Developer

3.HTML5之FileReader的使用_filereader html5-CSDN博客

4.http://www.cnblogs.com/hema/archive/2009/10/21/1587560.html

5.红足1世手机版【欢迎您!】

鸣谢

HTML5之FileReader的使用

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。