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

最新推荐文章于 2025-05-17 12:24:31 发布

qq_43667184

最新推荐文章于 2025-05-17 12:24:31 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43667184/article/details/87441804

这篇博客介绍了如何使用JavaScript将本地文件转换为Base64格式并上传到阿里云服务器。通过FileReader API读取文件，然后在服务端将Base64内容还原为原始文件。文章讨论了实现过程中的问题和解决方案，并提到了对大文件上传的优化需求，如添加进度条功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前言

在前面的博客《 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 functionfunction(data){$scope.currentVersion = data.version;},//fail functionfunction(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 functionfunction(data) {alert("上传文件成功");},// fail functionfunction(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;}}