利用WeX5平臺實現單圖片上傳功能

前段時間做過基於手機app的單圖片上傳、多圖片上傳的，現在把單圖片上傳的案例分享給有需要的朋友，歡迎有需要的朋友評論點贊，謝謝

一、效果圖

二、開發思路

圖片上傳主要是調用cordova插件，調用拍照功能，獲取照片後點擊上傳，上傳調用服務端代碼，傳到服務端的盤符中即可，顯示圖片只需要獲取到該圖片的絕對路徑即可。在上傳的時候需要將相對路徑存儲到數據庫中，方便圖片顯示的時候能夠獲取到絕對路徑。

開發頁面如下圖所示：

核心代碼如下圖所示：

上傳圖片的js代碼：

define(function(require){
	var $ = require("jquery");
	var justep = require("$UI/system/lib/justep");
	
	require("$UI/system/lib/cordova/cordova");
	require("cordova!cordova-plugin-camera");	//調用攝像頭類
	require("cordova!cordova-plugin-file");	//調用本地文件上傳類
	require("cordova!cordova-plugin-file-transfer");	//調用文件上傳轉換類
	var UUID = require("$UI/system/lib/base/uuid");
	
	var Model = function(){
		this.callParent();
		this.picName = "";	//圖片名稱
		this.picPath = "";	//圖片路徑
	};

	Model.prototype.modelParamsReceive = function(event){
		var onepicData = this.comp("onepicData");
		var operator = event.params.operator;
		if(operator == "new") {
			onepicData.newData({
				"defaultValues" : [{
					"fID" : justep.UUID.createUUID(),
					"fCreatePsnName" : localStorage.getItem("userName")==null?"x5創業邦服務中心":localStorage.getItem("userName"),
					"fCreatePsnID" : localStorage.getItem("userID")==null?"1":localStorage.getItem("userID"),
					"fCreateTime" : new Date(),
				}]
			});
		}
	};

	Model.prototype.saveBtnClick = function(event){
		var onepicData = this.comp("onepicData");
		var row = onepicData.getCurrentRow();
		var fImageUrl = onepicData.getValue("fImageUrl", row);
		if(fImageUrl == "" || fImageUrl == undefined) {
			justep.Util.hint("請拍攝圖片");
			return false;
		}
		onepicData.saveData({
			"onSuccess" : function(event) {
				justep.Shell.closePage();
			}
		});
	};

	Model.prototype.sltPicBtnClick = function(event){
		//拍照
        var _this = this;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {
                destinationType : navigator.camera.DestinationType.DATA_URL,// DATA_URL
                quality : 100,
                targetWidth : 200,
                targetHeight : 200,
                saveToPhotoAlbum : true,
//                allowEdit : true,
                sourceType : 1	//0、2爲從相冊文件中選擇，1爲拍照
            });
            // 拍照成功後回調
            function onLoadImageSuccess(imageData) {// imageURI imageData
            	_this.picPath = imageData;
            	var smallImage = document.getElementById(_this.getIDByXID('image3'));
            	smallImage.src = "data:image/jpeg;base64," + imageData;
            	
            	var onepicData = _this.comp("onepicData");
            	var bizID = onepicData.getCurrentRowID();
            	_this.picName = bizID + "_" + justep.Date.toString(new Date(),'yyyyMMdd_hhmmss');
            	onepicData.setValue("fImageUrl", "upload_files/" + _this.picName + ".jpg", onepicData.getCurrentRow());
            }
            function onLoadImageFail(error) {
            	alert(error);
            }
        }
	};

	Model.prototype.onepicDataSaveCommit = function(event){
		//保存成功
		var _this = this; 
		justep.Baas.sendRequest({
    		"url" : "/knowledge/onePic",
            "action" : "uploadImage",
            "async" : false,
            "params" : {
                "picPath" : _this.picPath,
                "name" : _this.picName
            }
    	});
	};

	return Model;
});

服務端的代碼如下圖所示：

package knowledge;

import java.io.FileOutputStream;

import javax.naming.NamingException;

import sun.misc.BASE64Decoder;

import com.alibaba.fastjson.JSONObject;
import com.justep.baas.action.ActionContext;
import com.justep.baas.data.sql.SQLException;

public class UploadImage {
	public static JSONObject uploadImage(JSONObject params, ActionContext context) throws SQLException, NamingException, java.sql.SQLException {
		String picPath = params.getString("picPath");
        String name = params.getString("name");
        BASE64Decoder decoder = new BASE64Decoder();
        try {
                byte[] decodedBytes = decoder.decodeBuffer(picPath);
//                String imgFile = "D:/WeX5_V3.4/model/UI2/knowledge/test/onPic/upload_files/"+name+".jpg";
                String imgFile = "C:/smf/WeX5_V3.4-runtime-java-win/apache-tomcat/webapps/cyb/uploadServer/upload_files/"+name+".jpg";
                FileOutputStream out = new FileOutputStream(imgFile);
                out.write(decodedBytes);
                out.close();
        } catch (Exception e) {
                e.printStackTrace();
        }
        return null;
	}
}

根據上述的前端代碼和後端代碼即可完成圖片的上傳與顯示了。

三、總結

1.只有手機端安裝好app，纔可以調用cordova插件。

2.單圖片上傳在手機app中非常有用。

3.後續還會上傳在手機app中上傳多圖片的案例，功能類似朋友圈的上傳圖片功能。