关于微信公众号实现图片上传的问题总结

最开始做这块的时候，主要是有两种方案

方案一利用微信提供的接口实现；参考链接：https://www.cnblogs.com/lilinwei340/p/6379464.html

方案二，利用 输入输出流进行图片上传保存，在这里贴出代码来

<form id="originalForm" class="imgPic uploadForm" name="form"
                    action="" enctype="multipart/form-data">
                    <input name="resoType" value="images" style="display: none;" /> <input
                        id="fileNames" name="fileNames" value="" style="display: none;" />
                    <ul class="photoIds">
                        <li photoid="" class="upcam choosebtn"><a href="#"
                            οnclick="uploadImage($(this))"><img
                                src="../images/newJc/camera.png" class="camera"/></a></li>
                    </ul>
                </form>

这里是存放图片的页面结构

 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~图片的方法~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true
        //创建input file 次数
        var times = 0;
        //选择图片的所有次数
        var imageTimes = 0;
        //选择图片
        function uploadImage(that) {
            times = times + 1;
            isIos ? $(that).parent().before('<input name="imgList" class="abc" type="file" id="fileInput' + times + '" οnchange="showUpImage($(this))" style="display:none;" multiple="multiple" accept="image/*" capture="camera" name="cameraInput">') : $(that).parent().before('<input name="imgList"  capture="camera" type="file" id="fileInput' + times + '" οnchange="showUpImage($(this))" style="display:none;" multiple="multiple" accept="image/*" capture="camera" name="cameraInput">');
                $("#fileInput" + times).click();
        }
        //选择图片预览
        function showUpImage(that) {
            var id = that.attr('id');
            var files = document.getElementById(id).files;
            var fileNum = $(that).parents(".photoIds").find("li").length;
            if (fileNum >= 3) {
                $(that).parents(".photoIds").find(".choosebtn").hide()
            }
            for (var i = 0; i < files.length; i++) {
//                $(that).parent().find(".upcam").before(
//                    '<li class="photoId' + imageTimes + '" photoId="' + files[i].name + '"><a href="#" οnclick="showBigImage(' + imageTimes + ')">'
//                    + '<img class="certImgAttach' + imageTimes + '" /><b class="deletImg" οnclick="removeImage(' + imageTimes + ')"></b>'
//                    + '</a></li>');
                 $(that).parent().find(".upcam").before(
                         '<li class="photoId' + imageTimes + '" photoId="' + files[i].name + '"><a href="#" οnclick="showBigImage($(this))">'
                         + '<img class="certImgAttach' + imageTimes + '" /><b class="deletImg" οnclick="removeImage($(this))"></b>'
                         + '</a></li>');
                var imgObjPreview = document.getElementsByClassName("certImgAttach" + imageTimes)[0];
                // 火狐下，直接设img属性
                // 火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(files[i]);
                imageTimes = imageTimes + 1;
            }
        }
        //放大
        function showBigImage(that) {
            var nowImg =  that;
            $(nowImg).hasClass("bigImg") ? $(nowImg).removeClass("bigImg") : $(nowImg).addClass("bigImg")
        }
        //获取预览文件数
        function getFileNumber() {
            var fileNum = 0;
            $(".photoIds li").each(function () {
                if ($(this).attr("photoId") != null && $(this).attr("photoId") != "") {
                    fileNum = fileNum * 1 + 1;
                }
            });
            return fileNum;
        }
        //移除
        function removeImage(that) {
//            var liLen = $(".photoId" + imgId).parent().find("li").length - 1
//            if (liLen <= 3) $(".photoId" + imgId).parent().find(".choosebtn").show()
//            $(".photoId" + imgId).add("#fileInput" + (imgId + 1)).remove()
            var liLen = $("#mmm").find("ul:eq(0)").find("li").length - 1
            if (liLen <= 3)  $("#mmm").find(".choosebtn").show();
            that.parent().parent().add($("#mmm").find("#fileInput"+(that.parent().parent().attr("class").slice(7)*1+1))).remove()
        }
        function getFileNames() {
            var fileNames = "";
            $(".photoIds li").each(function () {
                if ($(this).attr("photoId") != null && $(this).attr("photoId") != "") {
                    fileNames = fileNames + $(this).attr("photoId") + ",";
                }
            });
            if (fileNames != "") {
                fileNames = fileNames.substring(0, fileNames.length - 1);
            }
            return fileNames
        }
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~图片的方法~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

用到的js方法

 

这里只是页面的方法， 实现了页面的调取摄像头以及进行图片的回显，

  $.ajax({
                              url: sessionStorage.getItem("httpSession") + 'Img/setPicUpload.do',
                              type: 'POST',
                              data: formData,
                              async: false,
                              cache: false,
                              contentType: false,
                              processData: false,
                              dataType: "json",
                              success: function (returndata) {
                                  if(returndata!=null && returndata.result.length>0){
                                      for(var i=0;i<returndata.result.length;i++){
                                          photo+=returndata.result[i]+">"
                                      }
                                  }else{
                                      photo=null;
                                  }
                                  if(photo!=null){
                                      photo=photo.slice(0,photo.length)
                                  }
                                  photos.push(photo);
                              }
                          })

图片进行后台交互存储用的是转为formData 进行ajax传输

@RequestMapping(value = "/setPicUpload.do", produces = { "text/html;charset=UTF-8;", "application/json;" })
    @ResponseBody
    public Map<String,Object> setPicUpload(@RequestParam(required = false, value = "imgList") List<MultipartFile> file,
            HttpServletResponse response) throws IOException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        ResponseObject result = new ResponseObject();
        List<String> list = new ArrayList<String>();
        Map<String,Object> map=new HashMap<String, Object>();
        // 文件返回路径
        for (int i = 0; i < file.size(); i++) {
            if (file.get(i).getOriginalFilename() == null || file.get(i).getOriginalFilename().equals("")) {
                continue;
            } else {
                try {
                    String path = infoScopeImgReportService.uploadPic(file.get(i).getBytes(), file.get(i).getOriginalFilename(),
                            file.get(i).getSize());
                    // 获取url
                    String url = fdfsClientConf.init.getStorage();
                    // String[] split = url.split(":");
                    list.add(url + path);
                } catch (Exception e) {
                    // 删除案卷的操作
                    e.printStackTrace();
                }
            }
        }
        map.put("result", list);
        return map;
    }

 

后台为ssm框架，这位controller层，图片存储用的fastDFS,进行的图片存储，这里完成了图片的存储，当然这种做饭有一点不好的是，由于机型太多的原因，有几类手机是无法实现图片上传的，其实不是无法存储，而已利用input调不起手机的摄像头，目前知道的华为 mate9。苹果5s是有问题的。目前正在适配此类机型，后续进行更新。