博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ng-Cordova插件之fileTransfer的使用
阅读量:6972 次
发布时间:2019-06-27

本文共 3243 字,大约阅读时间需要 10 分钟。

hot3.png

其实我觉得gitHub上的文档说的已经很详细了,但是鉴于是一个比较常用的插件以及貌似使用方法稍微的要比ng-camera那样看起来简单点,所以这里稍微的写写记录下

 

$cordovaFileTransfer的用处:用于文件的上传和下载,图片表单等等

$cordovaFileTransfer支持上传、下载等,这里我们暂且说下文件的上传,此处用图片举例

 

需求:拍照、查看、上传

具体实现:

前端代码:

     
         
             
                 
                     
                                  
                     
                         
{ {index}}                                                       
                     
现场拍照                                  
                     
                         
                                                       
                     
                                  
                     
查看                              
                  
             
                 
             

               

这里用到onsen中的carousel,当然,这里不需理会主要也就是ng-repeat

$scope.pictures = [     {value: false, imgSrc: ""},     {value: false, imgSrc: ""},     {value: false, imgSrc: ""},     {value: false, imgSrc: ""},     {value: false, imgSrc: ""}];

其中在图片上传中最主要的是imgSrc

上传的代码如下(我这里是写在factory里面,因为可以共用):

upLoad:function(imgRul,tempParam,success,error){     try{         var options = new FileUploadOptions();         options.filekey = "file";         options.fileName = "test.jpg";         options.mimeType = "image/jpeg";         options.chunkedMode=false;         options.params = tempParam;          var fileTransfer = new FileTransfer();         fileTransfer.upload(             imgRul,             encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),             success,             error,             options         );     }catch(e){         showAlert('提示',e);     } }

简明说下里面主要的东西

第一是上传:

fileTransfer.upload(     imgRul,     encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),     success,     error,     options );

其中第一个参数是图片在本地的URL地址,第二个参数是service地址,官网文档是encoded by encodeURI();当然我们都知道这里是为了防止乱码。第三个和第四个参数是成功和失败的回调函数,这些都很简单,最后一个options貌似有些讲究,展开说下:

Options是可选的一些参数,通过var options = new FileUploadOptions()获取出来(插件封装好的)

然后填充options中的一些属性值

1、 fileKey:这个元素的名称,服务端通过这个拿,我的理解是个key

2、 filename:上传的文件存在服务端的名称,默认是image.jpg

3、 httpMethod:顾名思义,http的请求方式,默认是post

4、 mimeType:一种标准,默认的是image/jpeg

5、 params:参数,这里面放的是一个对象,除了传过去图片还有别的一些信息啦,比如id啊啥啥啥乱七八糟的都在这里,有用!

当然还有别的一些东西貌似我们也不怎么用到

 

也就这么简单,我们就可以实现图片的上传了

 

但是很郁闷,这里我要实现过个图片的上传,说实话我从官网文档中并没有找到怎么实现过个图片的上传,我觉得是可以的,因为官网有这么一句话:                                               S!有木有,但是文档中又有这句话a!有木有!

好了,这些都先不去在意了吧,我再查查和问问怎么实现一次传送多个图片,目前我的实现方式是(当然也还是不怎么完美的):

//保存上传图片 $scope.upLoad = function () {     var errorCount = 0;     var success = function (r) {         errorCount += 1;     };//成功的毁掉函数     var error = function (error) {         errorCount += 1;         showAlert('提示', "第" + errorCount + "张图片上传失败!上传终止!");         return;     };     var tempParam = {         "document_id": orderId,         "document_type": orderStatus,         "created_by": user,         "url": "pictures"     };     for (var i = 0; i < $scope.pictures.length; i++) {         if ($scope.pictures[i].imgSrc != "") {             var imgUrl = $scope.pictures[i].imgSrc;             workOrderFactory.upLoad(imgUrl, tempParam, success, error);         }     }     showAlert('提示', '图片上传成功!'); };

判断$scope.pictures[i].imgSrc有木有值,有的话,就传,失败就停止!如何判断失败停止,我这里加了个变量:errorCount,每次上传一张的时候就会调用回调函数,error,或者success,我在success里面每次成功就+1,方便提示第几张上传错误,在error里面给出提示信息,并且终止函数的继续。如果没有遇到return,则说明图片都上传成功了,所以也同样给出提示信息。

一般我会觉得不会出现错误的,因为一点击保存,就跳出来图片上传成功,快到真的不敢相信(我不知道是不是还存在异步的问题,但是至少目前我测试的都是么有问题的)

 

后续如果还有更好的一次上传多个图片的方法会陆续整理。如果有bug也会及时来修改!

 

好吧,暂且说到这里咯n(*≧▽≦*)n

转载于:https://my.oschina.net/Nealyang/blog/529789

你可能感兴趣的文章
github开源文章生成pdf
查看>>
JavaEE(24) - JAAS开发安全的应用
查看>>
DDD领域驱动设计基本理论知识总结
查看>>
Python操作Redis数据库
查看>>
equals() 和 hashCode()
查看>>
<原创>在PE最后一节中插入补丁程序(附代码)
查看>>
简单的随笔 ,WSDL工具,Oracle备份还原,java调用.net webservice
查看>>
Workman websocket 握手连接
查看>>
[洛谷P1901]发射站
查看>>
cordova封装h5为app,cookie不可用解决方法
查看>>
mysql limit 优化
查看>>
谈恋爱与形象
查看>>
day22 Pythonpython 本文xml模块
查看>>
Fisher's exact test( 费希尔精确检验)
查看>>
SSH项目里面 忘记密码的邮件发送功能
查看>>
对Linux(Unix)的基础知识归纳
查看>>
自定义可扩展叠加头部的下拉控件
查看>>
转--Java工程师成神之路(2018修订版)
查看>>
SQLServer之Compute/ComputeBy实现数据汇总
查看>>
KMP算法
查看>>