-
我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片。显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法:
通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相机原理相同
123$cordovaImagePicker.getPictures(options).then(function(imageURI) {
for
(var i=
0
; i<imageuri.length;
if
=
""
err.message=
""
pre=
""
>
上面方法可以获得一组图片地址列表,接下来要做的就是把这些图片转成二进制流存储在本地,如下:
12345678910111213141516function rLFSURL(imageURI){
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(file) {
var reader =
new
FileReader();
reader.onloadend = function(e) {
//需要将图片路径转换为二进制流,并且指定类型为图像格式(还有其他格式,如文本格式等等)
var the_file =
new
Blob([e.target.result ], { type:
"image/jpeg"
} );
//存储图片二进制流
CacheData.setImgFileList(the_file);
//存储图片地址用于预览
CacheData.setImageURIList(imageURI);
};
reader.readAsArrayBuffer(file);
}, function(e){$scope.errorHandler(e)});
}, function(e){$scope.errorHandler(e)});
}
上面的关键是var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );,这是将图片转化为二进制,然后我用事先定义好的方法CacheData.setImgFileList()和CacheData.setImageURIList()把转化后的二进制流及图片存储起来。主意new Blob()方法并不兼容低版本的安卓系统。
如果再增加图片,我们只需要把他push进我们的数组里即可,删除的话就splice(index, 1)掉,这样待用户操作完后,点提交,我就把这些参数append进new FormData()里就OK了,如下
123456789for
(var i=
0
; i < CacheData.getImgFileList().length; i++){
formDataByImage.append(
"files"
, CacheData.getImgFileList()[i],
"images.jpg"
);
}
//以下是表单参数
formDataByImage.append(
"tenantId"
,
1
);
formDataByImage.append(
"facilityIdentify"
,
"217ae60e5bc746f"
);
//formDataByImage.append("nodeName", nodeName);
formDataByImage.append(
'sessiontoken'
, formData.sessiontoken);
formDataByImage.append(
'method'
,
'fax.upload'
);
ionic—cordova如何一次上传多张图片(类似input file提交表
最新推荐文章于 2021-06-04 02:28:16 发布