weui上传多图片,压缩,base64编码的示例代码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片
因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错,作为一个不太懂前端的渣渣可以拿来开箱即用
主要是不用调那么多的样式问题,直接上代码:
图片上传
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片
因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错,作为一个不太懂前端的渣渣可以拿来开箱即用
主要是不用调那么多的样式问题,直接上代码:
图片上传
//文件上传js vartmpl='', $gallery=$("#gallery"), $galleryImg=$("#galleryImg"), $uploaderInput=$("#uploaderInput"), $uploaderFiles=$("#uploaderFiles"); $uploaderInput.on("change",function(e){ varsrc,url=window.URL||window.webkitURL||window.mozURL, files=e.target.files; //这里获取到批量的file varfileNum=fileArr.length; for(vari=0,len=files.length;i 5){ break; } //fileArr.push(file); if(url){ src=url.createObjectURL(file); }else{ src=e.target.result; } varreader=newFileReader() reader.readAsDataURL(file) reader.onload=function(e){ varimage=newImage()//新建一个img标签(还没嵌入DOM节点) image.src=e.target.result image.onload=function(){ varcanvas=document.createElement('canvas'), context=canvas.getContext('2d'), imageWidth=image.width/5.5,//压缩后图片的大小 imageHeight=image.height/5.5; canvas.width=imageWidth; canvas.height=imageHeight; context.drawImage(image,0,0,imageWidth,imageHeight); vardata={ base64:canvas.toDataURL('image/jpeg') } mui.ajax({ url:"/file/uploadBase64", type:"POST", async:false, cache:false, processData:false,//不处理发送的数据 headers:{ 'Content-Type':'application/json' }, data:JSON.stringify(data), success:function(res){ console.log(res) if(res.code==100){ fileArr.push(res.data); //上传完成,前端页面显示 $uploaderFiles.append($(tmpl.replace('#url#',canvas.toDataURL('image/jpeg')))); }else{ weui.toast("出错了,请稍后再试","forbidden"); } }, error:function(){ weui.toast("出错了,请稍后再试","forbidden"); } }); } } } checkPhotoSize(); }); //控制显示5张以内照片 functioncheckPhotoSize(){ if(fileArr.length>4){ $(".weui-uploader__input-box").hide(); }else{ $(".weui-uploader__input-box").show(); } } varindex;//第几张图片 $uploaderFiles.on("click","li",function(){ index=$(this).index(); $galleryImg.attr("style",this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click",function(){ $gallery.fadeOut(100); }); //删除图片删除图片的代码也贴出来。 $(".weui-gallery__del").click(function(){ console.log('删除'+index); $uploaderFiles.find("li").eq(index).remove(); fileArr.splice(index,1); checkPhotoSize(); });
这里有几个要注意的点
1、要实现多图片上传,对比了几个UI框架,感觉还是weui的样式做的最好看
2、考虑到图片大小问题,一开始我使用的是直接将图片文件以数组的形式post给后台,然后后台使用MultipartFile数组接收,但是这导致有个问题,现在的手机拍照的图片都比较大,随便都有个3-5M一张图片,如果直接post给后台,用户体验不好(速度太慢了),同时也占用了服务器太多资源(主要是带宽和存储空间),所以必须前端先压缩后再上传
3、前端压缩目前能想到的是使用第三方工具接口(阿里或者七牛云端接口);前端页面利用canvas,进行base64编码,然后发送给后端,显然用后者会比较合适
最后利用canvas将图片进行base64编码压缩,可以实现到将3-5M的图片图片压缩为100k内,目前实现的是每次上传图片都会保存在服务器上,删除图片的话没法同步删除服务器上的图片,但是这个问题不大,需要修改的话将这个上传服务器的请求搞到点击提交表单的时候再上传图片就好了
最后贴一下后端接收代码:
/** *上传图片信息,base64字符串格式 *@parammap *@parammodel *@return */ @PostMapping(value="uploadBase64") @ResponseBody publicMapuploadBase64Image(@RequestBodyMap map)throwsParseException,IOException{ Map imageMap=newHashMap<>(); Stringbase64=map.get("base64").toString(); MultipartFilefile=BASE64DecodedMultipartFile.base64ToMultipart(base64); //获取文件保存路径 StringfileSavePath=globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue(); StringfileServerPath=globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue(); fileSavePath=fileSavePath+DateUtil.formatDatetime("yyyy-MM-dd"); fileServerPath=fileServerPath+DateUtil.formatDatetime("yyyy-MM-dd"); if(!file.isEmpty()){ StringfileName=file.getOriginalFilename(); Stringext=fileName.substring(fileName.lastIndexOf(".")+1); StringimgName="/"+UUID.randomUUID()+"."+ext; InputStreamin=null; OutputStreamout=null; try{ FileserverFile=newFile(fileSavePath+imgName); //判断文件父目录是否存在 if(!serverFile.getParentFile().exists()){ serverFile.getParentFile().mkdir(); } if(!serverFile.exists()){ serverFile.createNewFile(); } in=file.getInputStream(); out=newFileOutputStream(serverFile); byte[]b=newbyte[1024]; intlen=0; while((len=in.read(b))!=-1){ out.write(b,0,len); } out.close(); in.close(); StringserverPath=fileServerPath+imgName; returnResultUtil.successJson(serverPath); }catch(Exceptione){ e.printStackTrace(); returnResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage()); }finally{ if(out!=null){ out.close(); out=null; } if(in!=null){ in.close(); in=null; } } }else{ returnResultUtil.errorJson(ErrorEnum.E_90007); } } /** *base64转MultipartFile文件 * *@parambase64 *@return */ publicstaticMultipartFilebase64ToMultipart(Stringbase64){ try{ String[]baseStrs=base64.split(","); BASE64Decoderdecoder=newBASE64Decoder(); byte[]b=newbyte[0]; b=decoder.decodeBuffer(baseStrs[1]); for(inti=0;i 总结
到此这篇关于weui上传多图片,压缩,base64编码的示例代码的文章就介绍到这了,更多相关Weui多图片压缩上传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
热门推荐
- 返回顶部
- 3162201930
- czq8825@qq.com