WebUploader实现图片上传功能
本文实例为大家分享了WebUploader实现图片上传的具体代码,供大家参考,具体内容如下
描述:springmvc在jsp页面实现WebUploader插件上传图片,上传到oss阿里云存储上。
预览:
理解:前端WebUploader插件(这个得去看官网)调起后台,后台request接收文件参数,
重新拼装图片url,oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端。
先实现前端:1.定义js2.定义页面
//导入WebUploader插件js、css样式
js定义
//使用WebUploader插件做图片上传
functionInfoWebUploaderImg(id,folder,image,imageHidden,queueID,filename){
//初始化WebUploader
varuploader=WebUploader.create({
//选完文件后,是否自动上传。
auto:true,
//swf文件路径下载js里面有.swf文件
swf:'/js/plugins/webuploader/Uploader.swf',
//文件接收服务端。后台控制层
server:'/common/upload',
//选择文件的按钮。可选。
//内部根据当前运行是创建,可能是input元素,也可能是flash.
pick:id,
//只允许选择图片文件。
accept:{
title:'Images',
extensions:'gif,jpg,jpeg,bmp,png',
mimeTypes:'image/gif,image/jpg,image/jpeg,image/bmp,image/png',
},
});
/**
*验证文件格式、数量以及文件大小
*/
uploader.on("error",function(type){
if(type=="Q_TYPE_DENIED"){
alert("请上传图片格式文件");
}elseif(type=="F_EXCEED_SIZE"){
alert("文件大小不能超过8M");
}
});
//文件上传失败,显示上传出错。
uploader.on('uploadError',function(file){
alert("上传失败,请重试!");
});
//文件上传成功,给item添加成功class,用样式标记上传成功。data回调的js
uploader.on('uploadSuccess',function(file,data){
$(imageHidden).val('/'+data.nname);
$(image).attr("src",data.src);
$(image).css("margin-top","10px");
$(image).show();
$(image).removeClass("hide");
});
}
//jsp页面
选择图片
图片大小:510x294
//引用js初始化插件
InfoWebUploaderImg("#fileInput","spvideoimg","#image","input[name=cover]","singleDiv");
java后台
//上传图片(阿里云)控制层
@ResponseBody
@RequestMapping(value="/upload",method=RequestMethod.POST)
publicStringupload(@RequestParam(value="f",required=false,defaultValue="")Stringf,
Stringfolder,
MultipartHttpServletRequestrequest,HttpServletResponseresponse){
returncommonService.upload(folder,f,request,response);
}
//业务处理
publicStringupload(Stringfolder,Stringf,MultipartHttpServletRequestrequest,HttpServletResponseresponse){
log.info("CommonService上传图片(腾讯云):newFilename11:"+f);
JSONObjectjsonObject=newJSONObject();
Stringresult="";
try{
Iteratoritr=request.getFileNames();
MultipartFilefile=null;
Stringname="";
while(itr.hasNext()){
file=request.getFile(itr.next());
name=file.getOriginalFilename();
StringnewFilenameBase=UUID.randomUUID().toString().replace("-","");
StringoriginalFileExtension=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
StringnewFilename=newFilenameBase+originalFileExtension;
if(!StringUtils.isBlank(f)){
if(f.startsWith(","))
f.substring(1);
newFilename=(f.contains(".")?f.substring(0,f.lastIndexOf(".")):f)+".jpg";
}
newFilename="img/"+newFilename;
AliyunOssUtils.upLoadFile(newFilename,PropertyUtil.getValue("folder"),file);
//TentunOssUtils.uploadImage(file,newFilename);
/*if(PropertyUtil.getValue("pic_url").endsWith("/")){
jsonObject.put("src",PropertyUtil.getValue("pic_url")+newFilename);
}else{
jsonObject.put("src",PropertyUtil.getValue("pic_url")+"/"+newFilename);
}*/
jsonObject.put("src",CommonUtils.setImageVideoUrlSign(newFilename));
jsonObject.put("oname",name);
jsonObject.put("nname",newFilename);
//删除暂存在root里的图片
FiletempFile=newFile(name);
if(tempFile!=null&&tempFile.exists()){
tempFile.delete();
}
}
}catch(Exceptione){
log.error("上传图片异常",e);
jsonObject.put("e",e.getMessage());
}
result=jsonObject.toString();
returnresult;
}
工具类:
/**
*文件上传
*@paramfilename
*@paramfile
*/
publicstaticvoidupLoadFile(Stringfilename,Stringfolder,MultipartFilefile){
try{
//Endpoint以杭州为例,其它Region请按实际情况填写。
Stringendpoint=UPLOAD_HOST;
//阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维
StringaccessKeyId=ACCESS_KEY_ID;
StringaccessKeySecret=ACCESS_KEY_SECRET;
//创建OSSClient实例。
OSSossClient=newOSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);
//创建PutObjectRequest对象。
PutObjectRequestputObjectRequest=newPutObjectRequest(folder,filename,multipartFileToFile(file));
//如果需要上传时设置存储类型与访问权限,请参考以下示例代码。
//ObjectMetadatametadata=newObjectMetadata();
//metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS,StorageClass.Standard.toString());
//metadata.setObjectAcl(CannedAccessControlList.Private);
//putObjectRequest.setMetadata(metadata);
//上传文件。
ossClient.putObject(putObjectRequest);
//关闭OSSClient。
ossClient.shutdown();
}catch(Exceptione){
e.printStackTrace();
}
}
publicstaticStringsetImageVideoUrlSign(Stringcover){
if(cover.startsWith("/"))cover=cover.substring(1);
Stringhost=PropertyUtil.getValue("pic_url");
if(!host.endsWith("/"))host=host+"/";
if(cover.startsWith("http")&&cover.contains(host)){
cover=host+cover+"?"+TentunOssUtils.getSigne(cover.replace(host,""));
}elseif(!cover.startsWith("http")){
cover=host+cover+"?"+TentunOssUtils.getSigne(cover);
}
returncover;
}
publicstaticStringgetSigne(Stringkey){
if(!key.startsWith("/"))key="/"+key;
Stringsign="";
StringsecretId=SECRET_ID;
StringsecretKey=SECRET_KEY;
COSCredentialscred=newBasicCOSCredentials(secretId,secretKey);
COSSignersigner=newCOSSigner();
//设置过期时间为1个小时
DateexpiredTime=newDate(System.currentTimeMillis()+3600L*1000L);
//要签名的key,生成的签名只能用于对应此key的下载
//Stringkey="/exampleobject";
sign=signer.buildAuthorizationStr(HttpMethodName.GET,key,cred,expiredTime);
returnsign;
}
xml包:
com.aliyun.oss
aliyun-sdk-oss
3.8.0
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。