?????????????
?????????
?????
?
這里用到onsen中的carousel，當(dāng)然，這里不需理會(huì)主要也就是ng-repeat
$scope.pictures?=?[
?????{value:?false,?imgSrc:?""},
?????{value:?false,?imgSrc:?""},
?????{value:?false,?imgSrc:?""},
?????{value:?false,?imgSrc:?""},
?????{value:?false,?imgSrc:?""}];
其中在圖片上傳中最主要的是imgSrc
上傳的代碼如下（我這里是寫在factory里面，因?yàn)榭梢怨灿茫?/p>
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
?);
其中第一個(gè)參數(shù)是圖片在本地的URL地址，第二個(gè)參數(shù)是service地址，官網(wǎng)文檔是encoded by?encodeURI()；當(dāng)然我們都知道這里是為了防止亂碼。第三個(gè)和第四個(gè)參數(shù)是成功和失敗的回調(diào)函數(shù)，這些都很簡單，最后一個(gè)options貌似有些講究，展開說下：
Options是可選的一些參數(shù)，通過var options = new FileUploadOptions()獲取出來（插件封裝好的）
然后填充options中的一些屬性值
1、 fileKey：這個(gè)元素的名稱，服務(wù)端通過這個(gè)拿，我的理解是個(gè)key
2、 filename：上傳的文件存在服務(wù)端的名稱，默認(rèn)是image.jpg
3、 httpMethod：顧名思義，http的請(qǐng)求方式，默認(rèn)是post
4、 mimeType：一種標(biāo)準(zhǔn)，默認(rèn)的是image/jpeg
5、 params:參數(shù)，這里面放的是一個(gè)對(duì)象，除了傳過去圖片還有別的一些信息啦，比如id啊啥啥啥亂七八糟的都在這里，有用！
當(dāng)然還有別的一些東西貌似我們也不怎么用到
也就這么簡單，我們就可以實(shí)現(xiàn)圖片的上傳了
但是很郁悶，這里我要實(shí)現(xiàn)過個(gè)圖片的上傳，說實(shí)話我從官網(wǎng)文檔中并沒有找到怎么實(shí)現(xiàn)過個(gè)圖片的上傳，我覺得是可以的，因?yàn)楣倬W(wǎng)有這么一句話： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? S！有木有，但是文檔中又有這句話a！有木有！
好了，這些都先不去在意了吧，我再查查和問問怎么實(shí)現(xiàn)一次傳送多個(gè)圖片，目前我的實(shí)現(xiàn)方式是（當(dāng)然也還是不怎么完美的）：
//保存上傳圖片
?$scope.upLoad?=?function?()?{
?????var?errorCount?=?0;
?????var?success?=?function?(r)?{
?????????errorCount?+=?1;
?????};//成功的毀掉函數(shù)
?????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有木有值，有的話，就傳，失敗就停止！如何判斷失敗停止，我這里加了個(gè)變量：errorCount，每次上傳一張的時(shí)候就會(huì)調(diào)用回調(diào)函數(shù)，error，或者success，我在success里面每次成功就+1，方便提示第幾張上傳錯(cuò)誤，在error里面給出提示信息，并且終止函數(shù)的繼續(xù)。如果沒有遇到return，則說明圖片都上傳成功了，所以也同樣給出提示信息。
一般我會(huì)覺得不會(huì)出現(xiàn)錯(cuò)誤的，因?yàn)橐稽c(diǎn)擊保存，就跳出來圖片上傳成功，快到真的不敢相信（我不知道是不是還存在異步的問題，但是至少目前我測試的都是么有問題的）
后續(xù)如果還有更好的一次上傳多個(gè)圖片的方法會(huì)陸續(xù)整理。如果有bug也會(huì)及時(shí)來修改！
好吧，暫且說到這里咯n(≧▽≦)n
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81574.html
-
摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個(gè)插件能夠在比較容易的實(shí)現(xiàn)這個(gè)功能。
作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個(gè)插件能夠在ionic比較容易的實(shí)現(xiàn)這個(gè)功能。
1、安裝：
cordova...
cfanr
評(píng)論0
收藏0
-
摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個(gè)插件能夠在比較容易的實(shí)現(xiàn)這個(gè)功能。
作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個(gè)插件能夠在ionic比較容易的實(shí)現(xiàn)這個(gè)功能。
1、安裝：
cordova...
-
摘要：添加插件可能會(huì)遇到如下報(bào)錯(cuò)提示信息如果你在時(shí)，有注意到是需要版本大于等于解決方案所以只需要運(yùn)行命令這樣就在運(yùn)行就能打包成功了
添加ionic插件cordova-plugin-file可能會(huì)遇到如下報(bào)錯(cuò)
提示信息
:processDebugResources
:generateDebugSources
:compileDebugJava
apache/cordova/filetransf...
-
摘要：添加插件可能會(huì)遇到如下報(bào)錯(cuò)提示信息如果你在時(shí)，有注意到是需要版本大于等于解決方案所以只需要運(yùn)行命令這樣就在運(yùn)行就能打包成功了
添加ionic插件cordova-plugin-file可能會(huì)遇到如下報(bào)錯(cuò)
提示信息
:processDebugResources
:generateDebugSources
:compileDebugJava
apache/cordova/filetransf...
whidy
評(píng)論0
收藏0
男|高級(jí)講師
-
閱讀 1939·2023-04-25 23:28
-
閱讀 672·2023-04-25 22:49
-
閱讀 2416·2021-09-27 13:34
-
閱讀 5413·2021-09-22 15:09
-
閱讀 3672·2019-08-30 12:52
-
閱讀 2805·2019-08-29 15:26
-
閱讀 712·2019-08-29 11:12
-
閱讀 2257·2019-08-26 12:24
