Weui多图片压缩上传

Weui实现多图片压缩上传可以调用相机，后端Java

在文章之前可以先查看这里：大牛编写的文件上传

这篇文章是针对于上面大牛写的升级版，对图片进行了压缩

在手机拍照上传的时候，普通手机拍出的一张照片的大小在3MB左右
这样上传服务器会产生两种可能出现的问题

1.413错误，需要修改nginx 允许文件上传的最大值 这里是修改nginx的文章

2.即使修改了之后，能传上去，会很慢，所以要在上传之前（前端压缩），后台压缩也是没有任何效果，因为不是后台上传服务器慢，而是前端传递到后台的时候慢，之前为file类型上传，此篇文章升级为base64上传

html代码

<div class="weui-gallery" id="gallery">  
            <span class="weui-gallery__img" id="galleryImg">span>  
            <div class="weui-gallery__opr">  
                <a href="javascript:" class="weui-gallery__del">  
                    <i class="weui-icon-delete weui-icon_gallery-delete" style="margin-bottom: 50px">i>  
                a>  
            div>  
        div>  
	<div class="weui-cells weui-cells_form">  
            <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>  
                        <div class="weui-uploader__bd">  
                            <ul class="weui-uploader__files" id="uploaderFiles">  
                                  
                            ul>  
                            <div class="weui-uploader__input-box">  
                                <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="" capture="camera">  
                            div>  
                        div>  
                    div>  
                div>  
            div>  
        div> 

javaScript代码

$(function() {  
	           var tmpl = '
',
        $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;
        var length = fileArr.length;
        for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];
            if (length + i + 1 > 3) {
                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,
                        data = ''

                    canvas.width = imageWidth
                    canvas.height = imageHeight
                    context.drawImage(image, 0, 0, imageWidth, imageHeight)
                    data = canvas.toDataURL('image/jpeg')
                    $.ajax({
                        type: "POST",
                        url: $WEB_ROOT_PATH + '/nnSrm5rrcf8WDp0F',
                        data: {base64url: data},
                        cache: false,
                        success: function (data) {
                            uploadPathStr=uploadPathStr+data.image+",";
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("上传失败，请检查网络后重试");
                        }
                    });
                    //压缩完成
                    $uploaderFiles.append($(tmpl.replace('#url#', data)));
                }
            }
            // $uploaderFiles.append($(tmpl.replace('#url#', src)));
        }
        checkPhotoSize();
 });

JAVA后端代码

   /**
     * 上传图片信息
     * @param map
     * @param model
     * @return
     */
    @RequestMapping(value = "nnSrm5rrcf8WDp0F", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> uploadMainImage(@RequestParam Map<String, Object> map, Model model) {
        Map<String, Object> imageMap = new HashMap<>();
        String base64 = map.get("base64url").toString();
        MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
        try {
            String fileName = file.getOriginalFilename();// 图片name
            String createTime = String.valueOf(new Date().getTime());// 上传时间
            String imagePath=uploadImagePath+"/jinlongwx/attendance";// 文件路径
//            String imagePath="D:/upload";
            String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
            fileName = new Date().getTime() + "_" + new Random().nextInt(1000) + fileF;//新的文件名
//            String fileName = orginId + createTime + imgName;// 重名图片的覆盖问题
            String fileAdd = DateUtil.formatDate(new Date(), "yyyyMMdd");
            File file1 = new File(imagePath + "//" + fileAdd);
            //如果文件夹不存在则创建
            if (!file1.exists() && !file1.isDirectory()) {
                file1.mkdirs();
            }
            File targetFile = new File(imagePath, fileName);

//            targetFile = new File(file1, fileName);
            if (base64 == null) {
            }//图像数据为空
            int index = base64.indexOf("base64");
            base64 = base64.substring(index + 7, base64.length());
            BASE64Decoder decoder = new BASE64Decoder();
            byte[] b = decoder.decodeBuffer(base64);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {//调整异常数据
                    b[i] += 256;
                }
            }
            String imgFilePath = imagePath + "/"+ fileAdd+"/"+ fileName;// 新生成的图片
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(b);
            out.flush();
            out.close();
            imageMap.put("image", fileAdd+"/"+ fileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return imageMap;
    }