WebUploader如何实现图片上传功能(webuploader,开发技术)

描述：springmvc 在jsp页面实现 WebUploader插件上传图片, 上传到 oss阿里云存储上。

预览：

理解： 前端 WebUploader插件（这个得去看官网）调起后台,后台 request 接收文件参数，
重新拼装图片url，oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端。

先实现前端：1.定义js 2.定义页面

//导入WebUploader插件js、css样式<linkrel="stylesheet"type="text/css"href="${ctx}/css/plugins/webuploader/webuploader.css"/><scripttype="text/javascript"src="${ctx}/js/plugins/webuploader/webuploader.js"></script>

js定义

//使用WebUploader插件做图片上传functionInfoWebUploaderImg(id,folder,image,imageHidden,queueID,filename){//初始化WebUploadervaruploader=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回调的jsuploader.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页面<divclass="center-block"><divclass="btn-groupcol-sm-12"><divclass="fl"><divid="fileInput">选择图片</div><imgsrc=""class="wd200mt10"id="image"width="200"/></div><spanclass="help-blockm-b-none">图片大小：510x294</span><inputclass="form-control"id="imageHidden"name="cover"type="text"/></div></div>//引用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{Iterator<String>itr=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包：

<!--阿里云oss--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.8.0</version></dependency>