在上一篇博客ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版) 中,跟大家分享了ionic項(xiàng)目選擇本地圖片、拍照、裁剪、上傳到服務(wù)器的內(nèi)容,但是上一節(jié)的內(nèi)容由于使用了Cordova的Camera插件進(jìn)行了圖片選擇與拍攝,所以每次只能支持1張圖片的選擇與上傳。上一篇博客中的內(nèi)容適合用于頭像情景。
在本節(jié)中,跟大家分享使用Corodva的ImagePicker插件,實(shí)現(xiàn)多圖選擇與上傳。廢話不多說,進(jìn)入主題。
插件安裝
cordova plugin add corodva-plugin-imagepicker cordova plugin add cordova-plugin-file-transfer
定義圖片選擇服務(wù)
angular.module('starter.services', []) //配置單張圖片選擇 .factory('SelectPicture', function(UploadFile, Toast) { return { /** * 從圖庫選擇多張圖片 */ choosePictures: function() { window.imagePicker.getPictures(function(res){ for(var i = 0; i < res.length; i++){ UploadFile.uploadFile(res[i], "我的服務(wù)器接口地址");//傳遞自己的服務(wù)器接口地址 } }, function(err){ alert(err); }, { maximumImagesCount: 10, quality: 80 }); } } })
定義文件上傳服務(wù)
//文件上傳 .factory('UploadFile', function(Toast) { return { /** * 上傳文件到服務(wù)器 * * @param fileUrl 文件路徑 * @param server 服務(wù)器接口 */ uploadFile: function(fileUrl, server) { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = new FileUploadOptions(); options.fileKey = "BeanYon";//后臺(tái)獲取文件的鍵值 options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; options.chunkedMode = false; var params = {};//這里可添加自定義參數(shù) options.params = params; var ft = new FileTransfer(); ft.upload(fileUrl, encodeURI(server), success, err, options); } function success(r){ Toast.show("圖片已經(jīng)成功上傳"); } function err(error){ Toast.show("上傳頭像失敗,請(qǐng)確保網(wǎng)絡(luò)正常后再試"); } } } })
在Controller中調(diào)用
angular.module('starter.controllers', []) .controller('UsedUploadCtrl', function($scope, SelectPicture) { /** * 選擇圖片并上傳 */ $scope.uploadImage = function(){ SelectPicture.choosePictures($scope); } })
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com