ng-Cordova插件之fileTransfer的使用

fredshare 发布于2019-08-20 14:22 / 2114人阅读

摘要：如果没有遇到，则说明图片都上传成功了，所以也同样给出提示信息。如果有也会及时来修改好吧，暂且说到这里咯

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

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

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

需求：拍照、查看、上传

具体实现：

前端代码：

现场拍照

查看

这里用到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

云服务器 GPU云服务器 fileTransfer 云服务器多人独之使用 html使用插件 js怎么使用图形插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81574.html

ionic实现下载文件并打开功能（file-transfer和file-opener2插件）

摘要：作为一款，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用和这两个插件能够在比较容易的实现这个功能。作为一款app，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2这两个插件能够在ionic比较容易的实现这个功能。 1、安装： cordova...

cfanr 2019-08-26 11:43 评论0 收藏0
ionic实现下载文件并打开功能（file-transfer和file-opener2插件）

摘要：作为一款，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用和这两个插件能够在比较容易的实现这个功能。作为一款app，下载文件功能，和打开文件功能，在某些场景下还是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2这两个插件能够在ionic比较容易的实现这个功能。 1、安装： cordova...

fengxiuping 2019-08-01 18:34 评论0 收藏0
ionic打包报错Execution failed for task ':compileD

摘要：添加插件可能会遇到如下报错提示信息如果你在时，有注意到是需要版本大于等于解决方案所以只需要运行命令这样就在运行就能打包成功了添加ionic插件cordova-plugin-file可能会遇到如下报错提示信息 :processDebugResources :generateDebugSources :compileDebugJava apache/cordova/filetransf...

pepperwang 2019-08-26 11:49 评论0 收藏0
ionic打包报错Execution failed for task ':compileD

摘要：添加插件可能会遇到如下报错提示信息如果你在时，有注意到是需要版本大于等于解决方案所以只需要运行命令这样就在运行就能打包成功了添加ionic插件cordova-plugin-file可能会遇到如下报错提示信息 :processDebugResources :generateDebugSources :compileDebugJava apache/cordova/filetransf...

whidy 2019-08-22 15:22 评论0 收藏0