【微信公众号】微信公众号图片上传到阿里云OSS的三种方式：微信服务器，自家服务器，直传阿里云

方式一：上传至微信服务器，自家服务器获取素材，再上传至阿里云OSS

1. 引入微信jss-sdk，配置wx.config，配置连接和接入chooseImage和uploadImage
2. 使用微信jss-sdk，chooseImage方法选择要上传的图片，获取返回的localIds
3. 利用本地的localIds，通过微信jss-sdk，uploadImage上传至微信服务器，并返回临时素材serveId
4. 在服务器端使用前端传回的serveId，获取微信临时素材接口，下载素材（3天有效期）
5. 服务器去微信服务器下载图片，并上传至阿里云OSS  

 存在问题，过程过于复杂，存在很多流程，也浪费服务器的带宽，耗时也长；

 

方式二、直传阿里云OSS

1. 引入微信jss-sdk，配置wx.config，配置连接和接入chooseImage
2. 使用微信jss-sdk，getlocalImageData，获取图片（base64）
3. 将base64的图片转为blob格式，准备上传至阿里云OSS
4. 获取OSS服务器签名（记得加密）
5. 直传阿里云OSS

 

方式三、客户端上传至服务器，服务器上传至阿里云OSS（OSS配置麻烦）

1. 引入微信jss-sdk，配置wx.config，配置连接和接入chooseImage
2. 使用微信jss-sdk，getlocalImageData，获取图片（base64）
3. 将base64的图片转为blob格式，上传到服务器
4. 由服务器上传至阿里云OSS

 

参考文章：

     1，实现图片资源(base64,blob)的互转，及上传到服务器 https://blog.csdn.net/wucong60/article/details/81289227

     2，base64和Blob相互转化：https://www.cnblogs.com/jiujiaoyangkang/p/9396043.html

     3，微信公众号上传图片解析： https://blog.csdn.net/qinghechaoge/article/details/79838793

     4，直传阿里云OSS：https://www.cnblogs.com/fozero/p/10517442.html

     5，微信公众号图片上传，经微信：https://www.cnblogs.com/mark8080/p/8707485.html

 

关键代码实现：

  1，wx.chooseImage选择图片，并将base64的图片转化为file类型，待上传到服务器（不上传微信服务器）

wx.chooseImage({
     count: imageLength - imageUrlList.length,   //上传图片的张数，最多上传9张，这里设置6张
     sizeType: ['original', 'compressed'],　　   // 可以指定是原图还是压缩图，默认二者都有
     sourceType: ['album', 'camera'],　　        // 可以指定来源是相册还是相机，默认二者都有
     success: function (res) {
          //限制选择的图片
          var sum = res.localIds.length + imageUrlList.length;
          if (sum > 6) {
              $.MsgBox.Alert("最多只能上传6张图片");
              return;
          }
          //选择好图片后，把localId进行存储
          for (var i = 0; i < res.localIds.length; i++) {
              imageUrlList.push(res.localIds[i]);
          }
          //渲染选择的图片
              showImg(imageUrlList);
          //转化base64为file
              WxImageToFile();
          },
     fail: function (res) {
          alert(JSON.stringify(res));
     }
});

2，接收wx.getLocalImgData返回的base64图片并进行处理【安卓和苹果，base64有大坑】

    //获取base64格式的图片，并转为file文件，进行上传
    function WxImageToFile() {
        for (let i = 0; i < imageUrlList.length; i++) {
            wx.getLocalImgData({
                localId: imageUrlList[i],　　//需要上传的图片的本地ID，由chooseImage接口获得
                success: function (res) {
                    let localData = res.localData;
                    let imageBase64 = '';
                    if (localData.indexOf('data:image') === 0) {
                        //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                        imageBase64 = localData.split(',')[1];
                    } else {
                        //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                        //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                        imageBase64 = localData.replace(/\n/g, '');
                    }
                    let fileImage = dataURLtoFile(imageBase64 , 'gg'+i+'.png');
                    fileImageData.push(fileImage);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        }
    }

3，将base64的图片格式转为file类型以上传给服务器

    //符合微信的dataURL转文件类型
    function dataURLtoFile(dataURI, filename) {
        let byteString, mimeString;
        // 查找字符串是否存在
        if (dataURI.indexOf(',') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
            mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        } else {
            byteString = atob(dataURI);
            mimeString = 'image/png';
        }
        let n = byteString.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = byteString.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mimeString});
    }

4，通过FormData对象，进行文件上传，提交图片数据到服务器

    //提交评论
    $("#sub-comment").click(function () {
        if ($("#comment-ct").val() == "" && fileImageData.length ==0) {
            alert("请输入评论内容！");
            return;
        }
        var orderId = $("#myCommentOrderId").text();
        var goodsId = $("#myCommentGoodsId").text();
        var comment = $("#comment-ct").val();
        let form = new FormData();
        form.append('goods_id', goodsId);
        form.append('order_id', orderId);
        form.append('comment', comment);
        if (fileImageData.length > 0) {
            for (var i in fileImageData) {
                form.append('comment_pic[' + i + ']', fileImageData[i]);
            }
        }
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "",
            processData: false,
            contentType: false,
            data: form,
            success: function (json) {
                if (json.status) {
                    $.MsgBox.Alert(json.msg);
                    
                } else {
                    $.MsgBox.Alert(json.msg);
                }
            }
        });
    });

 5，微信自带查看图片 wx.previewImage

    //放大图片
    function checkImages(that) {
        var arrImages= [];
        $(that).parent().children("img").each(function(index,element){
            console.log(element.src);
            arrImages.push(element.src);
        });
        wx.previewImage({
            current: $(that).attr("src"), // 当前显示图片的http链接
            urls: arrImages               // 需要预览的图片http链接列表
        });
    }