vue.js 結合corodva 移動端 附件上傳以及圖片拍照上傳
阿新 • • 發佈:2019-02-08
1.html 點選事件觸發方法呼叫cordova中的getPicture處理
_this.pictureSource=navigator.camera.PictureSourceType; _this.destinationType=navigator.camera.DestinationType; navigator.camera.getPicture(_this.onSuccess, _this.onFail, { quality: cameraQuality, sourceType:1, destinationType: _this.destinationType.FILE_URI });
2.拍照成功 呼叫onSuccess ,獲取失敗 呼叫onFail
onSuccess:function(imageData){
this.fileUpload(imageData);
},
//拍照失敗呼叫
onFail:function(message){
showMessage('拍照失敗: ' + message);
},
3.回傳成功觸發fileUpload
fileUpload:function(imageURI){//圖片上傳方法 var that = this; //var imageURI = document.getElementById('packageCamera').src; //此處執行檔案上傳的操作,上傳成功後執行下面程式碼 var options = new FileUploadOptions(); //檔案引數選項 options.fileKey = "dmsFile";//向服務端傳遞的file引數的parameter name options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);//檔名 options.mimeType = "image/jpeg";//檔案格式,預設為image/jpeg //存放 引數 options.params = { }; options.headers = { Authorization: "Bearer "+getParamsStorage('Token') } var ft = new FileTransfer();//檔案上傳類 /* ft.onprogress = function (progressEvt) {//顯示上傳進度條 if (progressEvt.lengthComputable) { navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100)); } } */ ft.upload(imageURI, actionUrl, that.callbackSuccess,that.callbackFail,options); },
4.附件上傳與圖片上傳 fileUpload 方法執行雷同,區別在於自己使用了另一個外掛cordova-plugin-file-chooser
入口如下:
filechooser.open( {}, _this.onFileSuccess, _this.onFileFail );