JS实现本地文件上传至阿里云服务器
前言
在前面的博客中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作。这次需要实现将本地打包好的文件上传至阿里云服务器。使用前面的图片文件上传方法无法完成此操作。操作界面如下:
思路
本地与服务端传输文件的格式应该是熟悉的Base64格式。首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件。
源码解析
控制器
Html脚本
服务端接收代码
工具类
读取到的文件内容如下:
由上图可见,其编码方式正是我们之前所说的Base64编码方式。那么接下来的工作就很好做了。按照之前图片处理的思路即可。
期间自己也遇到了一部分问题。例如
<i id="appBase64" hidden="hidden"></i>
<i id="appName" hidden="hidden"></i>
隐藏元素的位置,尽量将其置于靠近提交Buton的附近,否则在控制器中获取不到其内容。
经过以上步骤,就可以实现将更新包上传至服务端相应更新文件夹中,同时将更新包版本号信息写入相应的version.txt文件内。
代码领悟
将以上代码与之前做过的图片上传做对比,发现两者在数据获取时的方式是不同的,本文使用了。之前做图片上传时应用此方法亦可以解决问题。两者写入服务端的方法是相同的,均是将Base64编码内容写入文件中。思路清晰了,问题自然会很容易得到解决。
进一步优化
幸福永不满足,在以上文件上传过程中会遇到较大文件的上传,为此可能需要等待1min,甚至若干分钟,这是让人无法忍受的事情。为了增强用户的使用体验。特为文件上传增加进度条美化效果。详情见下篇博客。
参考文献
1.
2.
3.
4.
5.
鸣谢
- 点赞
- 收藏
- 关注作者
评论(0)