JavaScript进阶（九）：JS实现本地文件上传至阿里云服务器_以下是使用js的xhr api将图片上传到阿里云服务器的示例代码 (1)

本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/138926056

web浏览器中的javascript

客户端javascript
在html里嵌入javascript
javascript程序的执行
兼容性和互用性
可访问性
安全性
客户端框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

计时器
浏览器定位和导航
浏览历史
浏览器和屏幕信息
对话框
错误处理
作为window对象属性的文档元素

} catch (error) {
alert(“G031:” + error.message);
}
};
});



#### Html脚本



#### 服务端接收代码

/************************* 更新移动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);
}
}



工具类

/**
 * 
 * @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;
}
}
```



```
 
```


读取到的文件内容如下:


 ![](https://img-blog.csdn.net/20160316111728050?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)


      由上图可见，其编码方式正是我们之前所说的Base64编码方式。那么接下来的工作就很好做了。按照之前图片处理的思路即可。


      期间自己也遇到了一部分问题。例如








      隐藏元素的位置，尽量将其置于靠近提交Buton的附近，否则在控制器中获取不到其内容。


      经过以上步骤，就可以实现将更新包上传至服务端相应更新文件夹中，同时将更新包版本号信息写入相应的version.txt文件内。


### 代码领悟


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


### 进一步优化


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




### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)