html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

先上效果

上传图片后(设置了最多上传3张图片,三张后上传按钮消失)

点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正)

 

html页面

   需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响

addPhoto.html

 <!--图片缩略图-->
         <div class="weui-cells weui-cells_form" style="margin-top:0px;">
                <div class="weui-cell">
                      <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title" style="font-size: 14px;">照片:</p>
                                 <div class="weui-uploader__info"><span id="curNum">0</span>/3</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles"></ul> <!--缩略图显示-->
                                <div class="weui-uploader__input-box">
                                        <form action="" id="upBox_add" οnsubmit="return false;">
                                        <input id="uploaderInput" name="file" class="weui-uploader__input zjxfjs_file" type="file"  capture="camera" accept="image/png,image/jpg,image/gif,image/JPEG" multiple=""></input>
                                     </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         <!--放大图片显示-->
          <div class="weui-gallery" id="gallery">
                  <span class="weui-gallery__img" id="galleryImg" style="bottom: 12%;"></span>
                  <div class="weui-gallery__opr" style="width:50%;">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>