环境:jdk 18
jar版本: <dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.4</version>
</dependency>
html: <input type="hidden" value="${idcard.frontPhoto}" id="frontPhoto" name="frontPhoto">
<div id="container">
<a class="btn btn-default btn-lg " id="pickfiles">
<img id="img1" class="imgs" src="/img/upload.png" width="94px" style="height: 94px;width: 94px;"/>
</a>
</div>
js:
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',//上传按钮的ID
container: 'container',//上传按钮的上级元素ID
drop_element: 'container',
max_file_size: '100mb',//最大文件限制
flash_swf_url: '/static/js/plupload/Moxie.swf',
dragdrop: false,
get_new_uptoken: false,
chunk_size: '4mb',//分块大小
uptoken_url: '/auth/job/uptoken',//设置请求qiniu-token的url
domain: 'http://huang1211.qiniudn.com/',//自己的七牛云存储空间域名,huang1211是我的空间名,我的是华东地区,其他地域js要改源码,js是默认华 //东地区上传的,是我遇 到的一个坑,例如,华南,将js里up.qiniu.com和upload.qiniu.com分别替换为up-z2.qiniu.com和upload-z2.qiniu.com
unique_names: false,
save_key:false,
//文件类型过滤,这里限制为图片类型
filters: {
mime_types : [
{title : "Image files", extensions: "jpg,jpeg,gif,png"}
]
},
auto_start: false,//先预览后上传
init: {
'FilesAdded': function(up, files) {
for (var i = 0; i < files.length; i++) {
showPreview ("img1",files[i]);
}
},
'Key':function(up, file){
//自定义文件名上传
var key = getTimesamp();
$("#handPhoto").val("http://opbr3dxtw.bkt.clouddn.com/"+key);
return key;
},
'FileUploaded': function(up, file, info) {
},
'UploadComplete':function(up, file){
},
'Error': function(up, err, errTip) {
alert(errTip);
}
}
});
function getTimesamp(){
var myDate=new Date();
var myYear = myDate.getYear();
var myMonth = myDate.getMonth()+1;
var myHour= myDate.getHours();
var mda=myDate.getDate(); //获取当前日
var myMinute = myDate.getMinutes();
var mySecond = myDate.getSeconds();
var mhaom=myDate.getMilliseconds(); //获取当前毫秒数(0-999)
var fileName = myYear+""+myMonth+""+mda+""+myHour+""+myMinute+""+mySecond+""+mhaom+".jpg";
return fileName;
}
//本地预览关键方法
function showPreview (id,file) {
var image = new Image();
var preloader = new mOxie.Image();
preloader.onload = function() {
preloader.downsize( 300, 300 );
//image.setAttribute( "src", preloader.getAsDataURL() );
$('#'+id).attr("src",preloader.getAsDataURL());
};
preloader.load( file.getSource() );
}
java:
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;
/**
* 获取七牛token
* @param map
* @param response
* @return
*/
@RequestMapping(value = "/uptoken", method = RequestMethod.GET)
@ResponseBody
public String uptoken(HttpServletResponse response) {
Auth auth = Auth.create("Ap6TXkuRBdjrBclWKgTme67T5x4K7i8XSJZmRCvU","pmOGSkWma0kD-m-HEhLHedu5GWv_VApqnF80HzOZ");
String key = "huang1211";//空间名
String upToken = auth.uploadToken(key);
JSONObject json = new JSONObject();
json.put("uptoken", upToken);
return JSON.toJSONString(json, SerializerFeature.BrowserCompatible);
}