其实我觉得gitHub上的文档说的已经很详细了,但是鉴于是一个比较常用的插件以及貌似使用方法稍微的要比ng-camera那样看起来简单点,所以这里稍微的写写记录下
$cordovaFileTransfer的用处:用于文件的上传和下载,图片表单等等
$cordovaFileTransfer支持上传、下载等,这里我们暂且说下文件的上传,此处用图片举例
需求:拍照、查看、上传
具体实现:
前端代码:
<ons-list-item class="list-item-ons" style="padding: 0;margin-top: 0.5em" ng-repeat="picture in pictures" ng-init="index = $index+1">
<ons-carousel style="height: 3.2em;width: 180%;" swipeable item-width="60%" auto-scroll var="carouselCamear">
<ons-carousel-item class="list-action-menu">
<ons-row>
<ons-col width="5">
<div class="divBorder{{index}}"></div>
</ons-col>
<ons-col width="10%">
<div class="divCircle">
<div class="circleValue">{{index}}</div>
</div>
</ons-col>
<ons-col width="40%">
<div class="divDate">现场拍照</div>
</ons-col>
<ons-col ng-click="takePicture($index)">
<div class="divImg">
<img class="imgValue"
src="images/camera.png">
</div>
</ons-col>
<ons-col width="5%" style="text-align: right" ng-if="picture.value">
<div class="checkLine"></div>
</ons-col>
<ons-col ng-if="picture.value" ng-click="checkPic($index)">
<div class="check">查看</div>
</ons-col>
</ons-row>
</ons-carousel-item>
<ons-carousel-item class="list-action-item">
<p style="height:60px;background-color: #ffa500;color:white;margin: -10px;padding-left: 11%;line-height: 60px">
<ons-icon icon="fa fa-trash-o"></ons-icon>
</p>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
这里用到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