ng-Cordova插件之fileTransfer的使用

fredshare 發布于2019-08-20 14:22 / 2238人閱讀

摘要：如果沒有遇到，則說明圖片都上傳成功了，所以也同樣給出提示信息。如果有也會及時來修改好吧，暫且說到這里咯

其實我覺得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[i].imgSrc有木有值，有的話，就傳，失敗就停止！如何判斷失敗停止，我這里加了個變量：errorCount，每次上傳一張的時候就會調用回調函數，error，或者success，我在success里面每次成功就+1，方便提示第幾張上傳錯誤，在error里面給出提示信息，并且終止函數的繼續。如果沒有遇到return，則說明圖片都上傳成功了，所以也同樣給出提示信息。

一般我會覺得不會出現錯誤的，因為一點擊保存，就跳出來圖片上傳成功，快到真的不敢相信（我不知道是不是還存在異步的問題，但是至少目前我測試的都是么有問題的）

后續如果還有更好的一次上傳多個圖片的方法會陸續整理。如果有bug也會及時來修改！

好吧，暫且說到這里咯n(≧▽≦)n

GPU云服務器云服務器 fileTransfer 云服務器多人獨之使用 html使用插件 js怎么使用圖形插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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