利用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_URLquality : 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中上传多图片的案例，功能类似朋友圈的上传图片功能。

利用WeX5平台实现单图片上传功能相关推荐

利用jquery插件的图片剪切上传功能
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图, ...
php 输出图片给js,如何在php中利用croppic.js对图片进行剪切并上传
如何在php中利用croppic.js对图片进行剪切并上传发布时间:2021-01-30 16:41:02 来源:亿速云阅读:92 作者:Leah 这篇文章将为大家详细讲解有关如何在php中利用c ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能发布时间:2020-12-18 14:52:38 来源:亿速云阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
利用Socketserver实现简单的文件上传
利用Socketserver实现简单的文件上传 server.py #!/usr/bin/env python #coding:utf-8 import SocketServer import os ...
mui 批量上传图片 php,MUI+Hbuilder之多图片，单图片上传（五）
按钮 js: document.getElementById("uploadImg").addEventListener("tap", function() { ...
php单图上传并预览,JavaScript实现单图片上传并预览功能
本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码,供大家参考,具体内容如下单图片上传并实现预览 /*上传图片*/ .addPerson{ line-height: 190p ...
java ajaxupload_Java中利用ajaxfileupload.js组件实现文件的上传功能
概要: 在Java中,利用ajaxfileupload.js+commons-fileupload-1.3.1.jar 实现文件上传功能. 关键字: Java,上传,ajaxfileupload,fi ...
iOS 利用AFNetworking实现大文件分片上传
概述一说到文件上传,想必大家都并不陌生,更何况是利用AFNetworking(PS:后期统称AF)来做,那更是小菜一碟.比如开发中常见的场景:头像上传,九宫格图片上传...等等,这些场景无一不使用到 ...

利用WeX5平台实现单图片上传功能

利用WeX5平台实现单图片上传功能相关推荐

最新文章

热门文章