最近一周（做了一周的原因在最后）在做一个巡检功能：后台分配设备给不同角色用户，角色用户在前端读取自己能访问的设备列表，然后对应列表去进行检查，返回信息以及拍照上传回后台。大概就是这个样子滴~

H5上传:<input type="file" accept="image/*">,然后利用FileReader、Canvas、FormData这一系列的API和方法来实现图片预览、压缩、上传等操作

<div>
    <div id="preview"></div>
    <div class="upload-wrap upload-item">
        <img src="./static/images/plus (1).png" alt="上传">
        <input type="file" id="upload" name="imageFile[]" accept="image/jpg, image/jpeg, image/png, image/gif" class="upload-btn" id="empty-upload" multiple>
    </div>
    <div class="c"></div>
</div>


define(function (require, exports, module) {
    require(['./_common', 'jquery', 'config'], function () {
        $(function () {
            var upload = document.querySelector('#upload')
            preview = document.querySelector('#preview')
            maxSize = 200 * 1024
            upload.addEventListener('change', function () {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    compress(this.result);
                };
                reader.readAsDataURL(this.files[0]);
                this.value = null;
            })
            //获取mac值并显示在地址详情中
            var mac = getP('mac')
            $('.mac').val(mac)
            $.ajax({
                url: '',
                type: "POST",
                crossDomain: true,
                dataType: "json",
                data: {
                    mac: mac
                },
                success: function (res) {
                    var _mac = res;
                    $('.address').html(_mac)
                    $('#header').append(res)
                }
            })
            $(document).on("click", ".jq_closeimg", function () {
                $(this).parents('.upload-wrap').remove();
                var imgAddr = $(this).siblings('input').val()
                $.ajax({
                    url: '',
                    type: 'post',
                    data: {
                        absPath: imgAddr
                    },
                    success: function (res) {
                        // console.info(res)
                    },
                    error: function (e) {
                        alert('error')
                    }
                })
            })
            //提交按钮触发事件
            $('.btn-submit').on('click', function () {
            //do something
            })
        })
        //获取url参数

        function getP(n) {
            var hrefstr, pos, parastr, para, tempstr;
            hrefstr = window.location.href;
            pos = hrefstr.indexOf("?");
            parastr = hrefstr.substring(pos + 1);
            para = parastr.split("&");
            tempstr = "";
            for (var i = 0; i < para.length; i++) {
                tempstr = para[i];
                pos = tempstr.indexOf("=");
                if (tempstr.substring(0, pos).toLowerCase() == n.toLowerCase()) {
                    return tempstr.substring(pos + 1);
                }
            }
            return '';
        }

        function compress(res) {
            var img = new Image(),
                maxH = 400;
            img.onload = function () {
                var cvs = document.createElement('canvas'),
                    ctx = cvs.getContext('2d');
                if (img.height > maxH) {
                    img.width *= maxH / img.height;
                    img.height = maxH;
                }
                cvs.width = img.width;
                cvs.height = img.height;
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var dataUrl = cvs.toDataURL('image/jpeg', 0.5);
                // 单张上传
                imgUpload(dataUrl)
            }
            img.src = res;
        }

        function imgUpload(_url) {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    imageFile: _url
                },
                success: function (res) {
                    if (res.success === true) {
                        var imgUrl = res.data
                        var tmp =
                            '<div class="upload-wrap upload-item inputfile_gardenmax"><input name="imgAddr" type="hidden" value="' +
                            imgUrl +
                            '"><b class="closeimg jq_closeimg"><img src="./static/images/close-circle-fill.png" alt=""></b><img src="' +
                            _url + '" alt=""></div>';
                        $('#preview').append(tmp)
                    }
                },
                error: function (e) {
                    alert('error')
                }
            })
        }
    })
})

大致的流程就是这样，做了简单预览->压缩->上传，里面还有许多可优化的地方，比如压缩可以根据原始图片比进行压缩避免变形失真等问题，移动端Android和IOS有不同程度的bug等等问题，仅供参考吧！

被Java支配的恐惧

做了一周时间这个解释起来比较复杂（CEO开会连续两天，大部分在配合后端修改耗时），本人是本地开发的前端部分，接口都是本地配置的nginx转发请求，请求的是由Java编写的后台接口地址，这些代码本地测试过后svn提交到测试服务器1，测试服务器1再由Leader拉取项目到测试服务器2，然后经由多方测试，反馈问题后回本地修bug！相当之繁琐，但更尴尬的是Java后台最初我讲做表单+图片一起上传，跟我讲必须以表单提交，提交过去由于mine-type问题，说处理不了要我改代码。Java跟我规定参数名 string0 string1…我发送请求跟我说必须连续否则接收不到，omg！当时我的心情就是我是谁？我在哪？我在做什么？不由的发出了来自灵魂的疑问：如果有删除操作怎么办？怎么保证随便删除掉还能连续？疯狂循环判断排序？当Java终于解决了参数名必须连续的问题后我们本地测试过轮到Leader走流程，走流程发现图片以FormData上传不好改用base64，base64太长太大又超过服务器的限制2M且服务器的配置不允许更改！然后改单张上传，每添加一张图片就请求一次上传操作，增加了连接数但算是基本满足各方的基本需求！主要来自于被Java支配的恐惧，真的想问我自己写PHP实现可以不可以？期间改了大概3-4次数据传送方式以及格式，FormData、ajax的data对象、string拼接、base64转blob等等，总而言之，如果你和你现在team的后端配合的还不错，那么请且行且珍惜~