weui上传多图片,压缩,base64编码的示例代码


Posted in Javascript onJune 22, 2020

记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片

因为使用的是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多图片压缩上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
Javascript Select操作大集合
May 26 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js Function类型
Dec 04 Javascript
js读取注册表的键值示例
Sep 25 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
详细分析Node.js 多进程
Jun 22 #Javascript
详细分析vue响应式原理
Jun 22 #Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 #Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 #Javascript
支付宝小程序实现省市区三级联动
Jun 21 #Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python3 判断列表是一个空列表的方法
2018/05/04 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python变量访问权限控制详解
2019/06/29 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
总经理司机岗位职责
2014/02/06 职场文书
团代会开幕词
2015/01/28 职场文书
车间主任岗位职责
2015/02/03 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
董事长新年致辞
2015/07/29 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript