本着开源节流,增强用户体验的原则,我们公司在我的坑蒙拐骗下,决定用七牛云做图片,拥抱云计算啦。(最后会附源码哦~)
踩点
还是老一套,要做一件没有做过的事情,我们先踩踩点。
七牛云对开发者非常的友好,可以在开发者中心找到SDK。
这边巴拉巴拉讲了很多,主要看了一下java和js的SDK,我们选择用javascript上传图片,首先要获取一个token。
获取token
java 后台代码
/**
* 获取token
* @Title: upToken
* @author: Glacier
* @return: void
*/
public void upToken() {
Map<String, Object> resultMap = new HashMap<>();
String token = QianNiuUpload.getUpToken();
resultMap.put("uptoken",token);
renderJson(resultMap);
}
public class QianNiuUpload {
//设置好账号的ACCESS_KEY和SECRET_KEY
public static String ACCESS_KEY = "eohGef*****";
public static String SECRET_KEY = "E2G*******0";
//要上传的空间名称
public static String bucketname = "g***";
//密钥配置
public static Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
//简单上传,使用默认策略,只需要设置上传的空间名就可以了
public static String getUpToken() {
return auth.uploadToken(bucketname);
}
}
整理了一下用到的jar包,可以点击这里下载。
上传图片
导入前端需要用到的包
<!--别忘了jquery-->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!--七牛云组件-->
<script type="text/javascript" src="./qianniuJs/js/qiniu.js"></script>
<script type="text/javascript" src="./qianniuJs/js/moxie.js"></script>
<script type="text/javascript" src="./qianniuJs/js/plupload.dev.js"></script>
页面加载完毕 发起请求获取token
function getTokenMessage() {
$.ajax({
url: '/upToken',
type: 'POST',
data: {},
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
dataType : 'json',
success: function (data) {
var obj = data;
uploaderReady(obj.uptoken);
}
});
}
$(document).ready(function(){
getTokenMessage();
});
上传图片
function uploaderReady(token){
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles', //上传按钮的ID
container: 'btn-uploader', //上传按钮的上级元素ID
drop_element: 'btn-uploader',
max_file_size: '100mb', //最大文件限制
flash_swf_url: '/static/js/plupload/Moxie.swf',
dragdrop: false,
chunk_size: '4mb', //分块大小
uptoken: token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
domain: 'http://xxxxxxxxxxx.com/', //自己的七牛云存储空间域名
multi_selection: false, //是否允许同时选择多文件
filters: {
mime_types: [ //文件类型过滤,这里限制为图片类型
{title: "Image files", extensions: "jpg,jpeg,gif,png"}
]
},
auto_start: true,
unique_names :true, //自动生成文件名,如果值为false则保留原文件名上传
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
});
},
'BeforeUpload': function (up, file) {
// 每个文件上传前,处理相关的事情
},
'UploadProgress': function (up, file) {
//文件上传时,处理相关的事情
//上传进度 class="layui-btn" type="button"
$('#qiniupercent').attr('style','width:'+file.percent+'%');
},
'UploadComplete': function () {
},
'FileUploaded': function (up, file, info) {
//每个文件上传成功后,处理相关的事情
//其中 info 是文件上传成功后,服务端返回的json,形式如
//{
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
//}
var domain = up.getOption('domain');
var data = eval('(' + info.response + ')');
var imgurl = domain + data.key
console.log(imgurl)
// 返回的这个imgurl 是图片的链接
$('#img_div').append("<img class='upload_img' src='"+ imgurl +"'/>")
},
'Error': function (up, err, errTip) {
alert(errTip);
},
'Key': function (up, file) {
//当save_key和unique_names设为false时,该方法将被调用
var key = "";
$.ajax({
url: '/qiniu-token/get-key/',
type: 'GET',
async: false,//这里应设置为同步的方式
success: function (data) {
var ext = Qiniu.getFileExtension(file.name);
key = data + '.' + ext;
},
cache: false
});
return key;
}
}
});
uploader.start();
}
效果
打完收工!