这里做一个记录。
这是后台七牛的获取token代码
/**
* 获取token
*
* @return 七牛的token
*/
@Path("/token")
@GET
@Produces(MediaType.APPLICATION_JSON)
public HashMap loadToken() {
HashMap resultMap = new HashMap();
try {
//七牛的参数
String accessKey = SysConfig.accessKey; //最新地址
String secretKey = SysConfig.secretKey;
String bucket = SysConfig.bucket; //最新格式
//获取token
HashMap pmap = new HashMap();
JSONObject result = new JSONObject();
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
resultMap.put("token", upToken);
resultMap.put("code", "1");
resultMap.put("remark", "数据获取成功");
} catch (Exception e) {
resultMap.putAll(AppUtils.parseException(e));
} finally {
HashMap logmap = new HashMap();
this.service.addAppLogs(logmap, "七牛的token");//加入日志
}
return resultMap;
}
下面就是 h5 页面的处理逻辑代码了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>添加反馈单</title>
<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../script/layui/css/layui.css" />
</head>
<style>
.wid{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.widdress{
width: 230px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
</style>
<body>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
<a class="aui-pull-left aui-btn">
<span class="aui-iconfont aui-icon-left" onclick="closeWindow()"></span>
</a>
<div class="aui-title">添加反馈</div>
</header>
<form class="layui-form layui-form-pane" action="" onsubmit="return false;">
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner">
反馈内容
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-input" style="margin-right: 10px;margin-left: 10px;">
<textarea placeholder="不能超过40个字哦.." id="CONTENT" name="CONTENT"></textarea>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label">
反馈日期
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="FK_RQ" placeholder="请选择日期" name="FK_RQ" readonly="true">
</div>
</div>
</li>
<div class="layui-upload" >
<button type="button" class="layui-btn" id="test2" onclick="showAction()" style="margin-top: 10px;margin-left: 10px;">上传图片</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" align="center" id="demo2"></div>
</blockquote>
</div>
<li class="aui-list-item" style="margin-top:30px;">
<div class="aui-list-item-inner aui-list-item-center aui-list-item-button">
<div class="aui-btn aui-btn-info aui-margin-r-5" lay-submit="" lay-filter="loginBtn" >提交</div>
</div>
</li>
</ul>
</div>
</form>
</body>
//自己项目的js路径
<script type="text/javascript" src="../../script/layui/layui.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui/aui-toast.js" ></script>
<script type="text/javascript" src="../../script/md5.js" ></script>
<script type='text/javascript' src='http://jssdk-v2.demo.qiniu.io/js/plupload.full.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js' charset='utf-8'></script>
<script type="text/javascript">
var files =[]; //图片的数组集合
var toast = new auiToast();
var qiniuToken="";//七牛的token
var isAddfeddback=0;//是否可以生成反馈单 0 代表不能
var id = "";//任务id
apiready = function() {
//退出应用程序
initToken();//初始化token
let param = api.pageParam;
id=param.id;
Addfeddback();//确定是否可以添加反馈单
api.addEventListener({
name: 'keyback'
}, function(ret, err) {
api.closeWidget({silent:false});
});
};
layui.use('laydate', function(){//操作日期的js代码
var laydate = layui.laydate;
//常规用法
laydate.render({
elem: '#FK_RQ'
});
});
// 上传图片
function showAction(){//调用手机组件
api.actionSheet({
title: '上传图片',
cancelTitle: '取消',
buttons: ['拍照','从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);//调用上传方法
}
});
}
function getPicture(sourceType) {
if(sourceType==1){ // 拍照
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
allowEdit: false,
destinationType: 'base64',
quality: 90,
saveToPhotoAlbum: true
}, function(file, err) {
logInfo("图片信息:",file+"]["+err);
if (file) {
if(qiniuToken==''){
initToken();//初始话七牛的token
}
logInfo("相机图片获取成功信息为:",file);
upPhotoQiniu(file)//上传图片的方法
}else {
alert(JSON.stringify(err));
}
});
}
else if(sourceType==2){ // 从相机中选择
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'base64',
quality: 50,
targetWidth: 750,
targetHeight: 750
}, function(ret, err) {
logInfo("图片信息:",ret+"]["+err);
logInfo("相册图片获取成功信息为:",ret);
if(qiniuToken==''){
initToken();//初始话七牛的token
}
upPhotoQiniu(ret)//上传图片的方法
});
}
}
function upPhotoQiniu(file){//上传七牛js方法
if(file.base64Data === null||file.base64Data === ""){
return false;
}
var key = file.data,
fileNameDotIndex = key.lastIndexOf('.'),
fileExtName = key.substring(fileNameDotIndex);
fileName = (new Date()).getTime()+ fileExtName;
var token = qiniuToken;
var domain = 'https://myshclub.com';
//region
var config = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 6,
region: 'z1'
};
var putExtra = {
fname: fileName,
params: {},
mimeType: null
};
putExtra.params["x:name"] = fileName;
logInfo("图片名称:","https://myshclub.com/"+fileName);
// 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
var error = function(err) {
logInfo("图片上传失败信息:",err);
toast.fail({
title: "图片上传失败",
duration: 2000
});
};
var complete = function(res) {
var fileFullPath = domain + '/' + res.key;
logInfo("图片成功名称:",fileFullPath);
toast.loading({
title:"图片上传成功",
duration:2000
});
if(files.length==0){
files.push(fileFullPath);//把图片路径存入数组里面
}else{//重新拼接一个数组
var newlist=[];
newlist.push(fileFullPath);
files= files.concat(newlist);//拼接一个数组
}
loadPhtots();//加载图片展示
toast.hide();
};
var next = function(response) {
var chunks = response.chunks||[];
var total = response.total;
// 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过
for (var i = 0; i < chunks.length; i++) {
if (chunks[i].percent === 0 || finishedAttr[i]){
continue;
}
if (compareChunks[i].percent === chunks[i].percent){
continue;
}
if (chunks[i].percent === 100){
finishedAttr[i] = true;
}
}
compareChunks = chunks;
};
var subObject = {
next: next,
error: error,
complete: complete
};
// 调用sdk上传接口获得相应的observable，控制上传和暂停
var fil=dataURLtoFile(file.base64Data, fileName);
observable = qiniu.upload(fil, fileName, token, putExtra, config);
observable.subscribe(subObject);//提交上传
}
//将base64Data 转化为file文件，必须这样，否则不可上传图片
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
function initToken(){//加载七牛的token
api.ajax({
url: apiurl + "/portal/api/token",
method: 'get',
data:""
}, function (ret, err) {
logInfo("加载token成功",ret);
if(ret.code === '1'){//初始化token成功
qiniuToken=ret.token;
}else{
logInfo("加载token失败",ret.remark);
}
});
}
function loadPhtots(){//加载图片展示
//重置图片页面
document.getElementById("demo2").innerHTML="";
for(var index=0;index<files.length;index++){
$('#demo2').append(
"<div class='aui-list-item-inner' id='"+index+"'>"+
'<img src="'+ files[index] +'" alt="'+ files.name +'" class="layui-upload-img">'+
"</div><div class='aui-btn aui-btn-danger' style='margin-top:6px;' onclick='delphoto("+index+")'>删除</div>"
)
}
}
function delphoto(num){//删除此照片在数组中
logInfo("图片数组移除前:",files);
files.splice(num, 1);
logInfo("图片数组移除后:",files);
loadPhtots();
}
//----------------------------------------------------------------------以上为上传图片的js代码，以下进行业务操作
//判断是否可以添加反馈单
function Addfeddback(){
api.ajax({
url: apiurl + "/portal/api/fk/isfk/" + id,
method: 'get',
data: '',
},function(ret, err){
if (ret) {
if(ret.code === '1'){
isAddfeddback=1;
}else{
toast.fail({
title: "不可添加",
duration: 2000
});
api.openWin({//跳转主页
name: 'main1',
url: './index.html',
});
}
} else {
toast.fail({
title: "不可添加",
duration: 2000
});
api.openWin({//跳转主页
name: 'main1',
url: './index.html',
});
}
});
}
//提交form表单的动作
layui.use(['form', 'layer'], function() {
$ = layui.$;
form = layui.form;
form.on('submit(loginBtn)', function(data) {
var fk_pic="";
user=layui.data("user");
//判断是否可生成反馈
if(isAddfeddback!=1){
toast.success({
title: "任务单已反馈",
duration: 2000
});
return false;
}
//判断是否上传了图片
if(files.length==0){
toast.fail({
title: "请上传图片",
duration: 2000
});
return false;
} else{
for(var i=0;i<files.length;i++){//处理反馈图片
fk_pic=fk_pic+files[i]+",";
}
}
//表单项校验
/* if(!checkRequire(data)){
return;
}*/
var content= $("#CONTENT").val();
var feedbackRq=$("#FK_RQ").val();
if(content==''||content==null){
toast.fail({
title: "请填写内容",
duration: 2000
});
return false;
}
if(feedbackRq==''||feedbackRq==null){
toast.fail({
title: "请填写内容",
duration: 2000
});
return false;
}
var sign=createSign(user.ID, "add");
api.ajax({
url: apiurl + "/portal/api/fk",
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: {
body: {
userid: user.ID,
sign: sign,
FK_PIC:fk_pic,
PATROL_ID:id,
CONTENT:content,
FK_RQ:feedbackRq
},
}
}, function(res,err) {
if(res.code ==='1'){
toast.success({
title:`反馈添加成功`,
duration:2000
});
//跳转到index
api.openWin({
name: 'addfk',
url: 'index.html',
reload:true
});
}else{
toast.fail({
title:`反馈单添加失败！`,
duration:2000
});
}
});
});
});
/**
*重置数据
*/
function reset(){
files =[]; //图片的数组集合
qiniuToken="";//七牛的token
isAddfeddback=0;//是否可以生成反馈单 0 代表不能
id = "";//任务id
$('#CONTENT').val("");
$('#FK_RQ').val("");
}
</script>
<html>
大致就是这样了。。。
3520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
