移动端ionic App 多文件上传问题
来源:互联网 发布:最红网络伤感歌曲大全 编辑:程序博客网 时间:2024/06/01 20:31
第一篇博客,多多指教。
以实际项目为例,这是一个混合开发的App,功能很简单:拍照、录视频,填写表单,上传,查询。但是这里面也有坑在,就是我要说的-多文件的上传问题。
首先File Transfer 插件,可以download、upload 文件,上传单文件是没有问题,也就是说上传头像的功能可以用,但是多文件就派不上用场了。
这里介绍的核心方法是window.resolveLocalFileSystemURL(),这是File Transfer 插件提供的一个方法,可以根据拍照、录视频拿到的File Path,读取文件流,将文件流解析为二进制Blob对象,然后拼接到Form Data对象上,最后上传服务器。
下面我一步一步说,从拍照到上传,代码贴到下面:
//打开相机 $scope.openMedia = function (type) { // myPopup.close(); $scope.popupShow = false; if (type === 2) { service.promiseProxy(function (promise) { service.videoCapture(promise); }, function (videoData) { var filePath = videoData[0].fullPath; var fileObj = { filePath: filePath, mediaType: 1 }; $scope.mediaDataArr.push(fileObj); }); } else { service.promiseProxy(function (promise) { service.openCamera(type, promise); }, function (filePath) { var fileObj = { filePath: filePath, mediaType: 0 }; $scope.mediaDataArr.push(fileObj); }); } };
这里把多个filePath组装为object,分别有filePath和mediaType两个属性,放到mediaDataArr这个数组里。
var tempArr = $scope.mediaDataArr, len = $scope.mediaDataArr.length, filePathArr = [];var fd = new FormData();// console.log('视频路径: ' + tempArr[0].filePath);var idx = 0;var platform = service.currentPlatform();tempArr.forEach(function (value, index) { if (platform === 'ios' && value.mediaType === 1) { value.filePath = "file://" + value.filePath; } window.resolveLocalFileSystemURL(value.filePath, function (fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function (e) { var the_file; if (value.mediaType === 0) { the_file = new Blob([e.target.result], { type: "image/jpeg" }); fd.append("files", the_file, 'img.jpeg'); // console.log('这是个图片'); } else if (value.mediaType === 1) { the_file = new Blob([new Uint8Array(e.target.result)], { type: "video/mp4" }); fd.append("files", the_file, 'video.mp4'); // console.log('这是个视频'); } idx++; //计数器,解决异步问题 if (idx === tempArr.length) { //此处拼接到表单fd.append(); service.reportSubmit(fd, promise); } }; reader.readAsArrayBuffer(file); }, function (e) { }); }, function (e) { });});
注意两点:其一,图片和视频解析为Blob对象的方式稍有不同;其二,文件读取的过程是异步的,每一个文件读取完都会触发reader.onloadend()方法,那么如何在所有文件全部读取完,然后统一拼接到formData对象上,最后上传到指定serverUrl。我们在reader.onloadend()方法里放了一个计数器,当idx === tempArr.length 时,表示所有文件全部读取完毕,我们就可以执行上传操作啦!
阅读全文
1 0
- 移动端ionic App 多文件上传问题
- ionic+ngCordova+formData拍照上传多文件
- Ionic和AngularJS实现移动端APP前端
- 移动端ionic App 资讯上下循环滚动的实现
- ionic+angularJS+cordova(FileTransfer)上传图片【移动端】
- 移动端开发-IONIC
- 移动app之ionic框架css布局
- ionic文件选择与上传
- 移动端文件上传-样式
- ionic APP上传到apple store
- 【ionic App问题总结系列】ionic 如何更新app版本
- ionic—基于web的移动端app开发框架(CSS篇1)
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
- ionic-基于javascript实现超级好用的移动端图像裁剪上传
- ionic在app内部打开pdf文件
- C++ explicit关键字详解
- Android开发笔记:Android控件之listview进阶篇
- poj_1328_Radar Installation(贪心)
- SpringMVC中@RequestMapping处理请求参数的@RequestParam注解
- Hadoop基础教程-第13章 源码编译(13.4 Hive2.1.1源码编译)
- 移动端ionic App 多文件上传问题
- pycharm执行python时,如何填写参数
- iOS提交应用至App Store流程
- Java NIO系列教程(4):Scatter/Gather
- 如何构建私有公钥基础设施
- 《neural network and deep learning》题解——ch03 再看手写识别问题题解与源码分析
- C++虚函数的实现机制
- IOS和H5之间的交互开发
- HDU2874 Connections between cities【LCA】