weui上传多图片,压缩,base64编码的示例代码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片
因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错,作为一个不太懂前端的渣渣可以拿来开箱即用
主要是不用调那么多的样式问题,直接上代码:
<div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">图片上传</p> <!-- <div class="weui-uploader__info">0/2</div>--> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> <!--<li class="weui-uploader__file" style="background-image:url(/img/upload-btn.png)"></li> <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)"> <div class="weui-uploader__file-content"> <i class="weui-icon-warn"></i> </div> </li> <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)"> <div class="weui-uploader__file-content">50%</div> </li>--> </ul> <div class="weui-uploader__input-box"> <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple=""> </div> </div> </div> </div> </div>
//文件上传js var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>', $gallery = $("#gallery"), $galleryImg = $("#galleryImg"), $uploaderInput = $("#uploaderInput"), $uploaderFiles = $("#uploaderFiles"); $uploaderInput.on("change", function(e) { var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; //这里获取到批量的file var fileNum =fileArr.length; for(var i = 0, len = files.length; i < len; ++i) { var file = files[i]; if(fileNum + i + 1 > 5) { break; } // fileArr.push(file); if(url) { src = url.createObjectURL(file); } else { src = e.target.result; } var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function(e) { var image = new Image() //新建一个img标签(还没嵌入DOM节点) image.src = e.target.result image.onload = function () { var canvas = 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); var data = { 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张以内照片 function checkPhotoSize(){ if(fileArr.length>4){ $(".weui-uploader__input-box").hide(); }else{ $(".weui-uploader__input-box").show(); } } var index; //第几张图片 $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字符串格式 * @param map * @param model * @return */ @PostMapping(value = "uploadBase64") @ResponseBody public Map<String, Object> uploadBase64Image(@RequestBody Map<String, Object> map) throws ParseException, IOException { Map<String, Object> imageMap = new HashMap<>(); String base64 = map.get("base64").toString(); MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64); //获取文件保存路径 String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue(); String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue(); fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd"); fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd"); if (!file.isEmpty()) { String fileName = file.getOriginalFilename(); String ext=fileName.substring(fileName.lastIndexOf(".")+1); String imgName = "/"+UUID.randomUUID()+ "." +ext; InputStream in = null; OutputStream out = null; try { File serverFile = new File(fileSavePath+imgName); //判断文件父目录是否存在 if(!serverFile.getParentFile().exists()){ serverFile.getParentFile().mkdir(); } if (!serverFile.exists()) { serverFile.createNewFile(); } in = file.getInputStream(); out = new FileOutputStream(serverFile); byte[] b = new byte[1024]; int len = 0; while ((len = in.read(b))!=-1) { out.write(b, 0, len); } out.close(); in.close(); String serverPath = fileServerPath + imgName; return ResultUtil.successJson(serverPath); } catch (Exception e) { e.printStackTrace(); return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage()); } finally { if (out != null) { out.close(); out = null; } if (in != null) { in.close(); in = null; } } } else { return ResultUtil.errorJson(ErrorEnum.E_90007); } } /** * base64转MultipartFile文件 * * @param base64 * @return */ public static MultipartFile base64ToMultipart(String base64) { try { String[] baseStrs = base64.split(","); BASE64Decoder decoder = new BASE64Decoder(); byte[] b = new byte[0]; b = decoder.decodeBuffer(baseStrs[1]); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) { b[i] += 256; } } return new BASE64DecodedMultipartFile(b, baseStrs[0]); } catch (IOException e) { e.printStackTrace(); return null; } }
总结
到此这篇关于weui上传多图片,压缩,base64编码的示例代码的文章就介绍到这了,更多相关Weui多图片压缩上传内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 这篇文章主要介绍了Python 利用base64库 解码本地txt文本字符串的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-09
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
- 这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-12
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-18
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01