1. 程式人生 > >vue.js 結合corodva 移動端 附件上傳以及圖片拍照上傳

vue.js 結合corodva 移動端 附件上傳以及圖片拍照上傳

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 );