ionic2中选取相册图片并支持多附件上传的
2017-05-04 14:16
309 查看
言归正传,项目中有个功能是通过相册或者拍照可以选取并上传多张图片到服务端,如图
UI部分并不难,但是在附件上传这块卡手至少一个星期,其实一直到今天完成该功能回头想想还是当初想的太复杂了些。找了很多资料,由于ionic2出来也没多久,百度资料很少,只能去谷歌,其中一个解决方案就是使用native中提供的 Transfer 插件。本来还挺高兴的,心想终于找到答案了,但是看过文档后才发现该插件只支持单个文件的上传,想要实现多附件?不好意思,我是没想到办法,后来找到一哥们写的放在for循环里面,显然不行,这会导致上传完后在服务端出现多条记录(相当于post了很多次)。没辙,又在stackoverflow上用我那蹩脚的英语提问了,万能的S.O也没能帮到我。
经过了长达数天的煎熬,到处找资料,也稍微有点头绪了,但是webapp这块实在是菜,看了很多资料也就激发出一点点灵感,大概意思是使用window.resolveLocalFileSystemURL方法将本地选取的图片转为Blob然后追加到FormData中去,但是怎么upload也没说啊。最重要的是ts文件中window.resolveLocalFileSystemURL这个方法根本就不存在,后来找到了替代的方法File.resolveLocalFilesystemUrl,但是不管怎么转都是报错。再后来就是发现了这篇让我脱离苦海的 文章 ,经过一番调试后发现,ImagePicker中返回的URI和这篇文章中使用的Camera返回的URI不一样,少了个file://,后来把这串加上后终于可以了。然后就是见证奇迹的时刻。
下面附上代码节选,几天的精华都在这里面了:
private upload(filePaths:Array<string>):Observable<any> { //每个文件上传任务创建一个信号 varobservables: Array<any> = []; filePaths.forEach((value:string, i, array) => { if (!value.startsWith('file://')) { value = 'file://' + value; } console.log('这里应该执行了吧.........'); var observable = new Observable((sub:any) => { File.resolveLocalFilesystemUrl(value).then(entry => { (<FileEntry>entry).file(file => { // this.readFile(<Blob>file); letblob: Blob = <Blob>file; const reader = new FileReader(); reader.onloadend = () => { const imgBlob = new Blob([reader.result], {type: blob.type}); this.formData.append('file', imgBlob, (<any>blob).name); console.log('已经成功一半了.................'+ + imgBlob); sub.next(null); sub.complete(); }; reader.readAsArrayBuffer(blob); }); }) .catch(error => console.log('报错了,日了狗----->' + JSON.stringify(error))); }); observables.push(observable); }); return ForkJoinObservable.create(observables); } uploadFile(host: string, params: Map<string, string>, filePaths:Array<string>, context: any, success: Function, fail: Function) { this.formData = new FormData(); this.upload(filePaths).subscribe(data => { console.log('开始上 a9e3 传........'); params.forEach((value, key) => { this.formData.append(key, value); }); this.http.post(host, this.formData).toPromise().then(res => { success.call(context, res); }).catch(error => { fail.call(context, error); }); // .catch(e => this.handleError(e)) // .map(response => response.text()) // // .finally(() => console.log('完成了')) // .subscribe(ok => console.log('上传成功了')); }, error => { console.log('文件处理失败'); }); }
可以这么去调用:
this.fileUpload.uploadFile(this.host, this.params, images, self, res => { console.log('真的可以了'); }, error => { console.log('好像失败了'); });
相关文章推荐
- ionic 的项目实现从手机相册选取图片或拍照并上传至服务器
- 图片拍照上传和相册选取
- ckfinder 不支持带中文名图片附件上传,上传成功不能显示和下载
- Android从相册中选取图片上传到阿里云OSS
- ionic2框架 图片选择与上传(支持ios,android)
- H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析
- 图片上传,包括从相册选取与拍照上传
- 强大的java编程实现邮件发送功能,支持内容,上传多个图片和多个附件
- ionic3 调用本地相册并上传图片
- 调用系统相机拍照,从相册选取图片上传
- 图片上传、显示网络图片、相册选取、拍照选取、图片裁剪
- 图片上传,包括从相册选取与拍照上传
- ionic中实现从相册中选择图片并一次上传多张图片
- # 仿照微信类的图片上传,支持相册及拍照
- 让FCKeditor支持上传附件与媒体
- 图片上传支持预览(C#)
- DZ6上传图片附件无法显示,解决方法
- js 获取上传图片 全路径,支持ie,firefox
- 图片上传支持预览(C#)
- 实现FCKeditor 多用户分文件夹上传图片等附件