图片上传（调用微信接口）

图片上传之原生方法

图片上传、压缩、回显、缩略图放大、删除、下载，可以参考这儿（h5方法）
https://github.com/zhangstar1331/pictureUpload
效果展示

背景

图片上传，我们一般用下面的H5方法，但是在安卓手机上无法一次性上传多张图片。为了能满足情况，如果是微信公众号项目，可以调用微信上传接口来实现。

图片上传之调用微信接口

1、h5页面引入微信js

2、调用后台接口，进行微信初始化配置

$.ajax({
        url : "/cic-crm-web/cic/getConfig.do",
        async : true,
        type : "POST",
        headers: {"token":token},
        data : {
            "url" : encodeURIComponent(location.href.split('#')[0])
        },
        dataType : "json",
        success : function(data) {
            if (data != null) {
                conf = {'timestamp':data.timestamp, 'nonceStr':data.nonceStr, 'signature':data.signature};
                wx.config({
                    debug : false,
                    appId : "",
                    timestamp : data.timestamp, //时间戳
                    nonceStr : data.nonceStr, //随机字符串
                    signature : data.signature, //得到的签名
                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','chooseImage','previewImage','uploadImage','downloadImage'] // 功能列表，我们要使用JS-SDK的什么功能
                });
            }
        }
    })

3、调取摄像头和相册获取图片

	$('#idPartView .hidden-input').on('click', wxLoadImage.getImage);
	var num = 0;
	//调用微信api获取照片
	var wxLoadImage = {
		picId:null,
		//获取签名信息
		init:function(){},
		//调取摄像头和相册获取图片
		getImage:function(){
			//配置一次最多上传几张图片
			var count = 9;
			wxLoadImage.picId = $(this).parent();
			if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {
				count = 2;
			}
			wx.ready(function () {
                //调取摄像头和相册
                var localIds = [];
                var leng = 0;
                wx.chooseImage({
                    count: count, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        localIds = localIds.concat(res.localIds); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    	leng = localIds.length;
                    	if(window.__wxjs_is_wkwebview){//判断ios是不是用的 wkwebview 内核 
			                for(var i = 0; i < leng; i++ ){
			                	num++;
			                    wxLoadImage._getIosImage(localIds[i],num)
			                }
			            }else{
			               	for(var i = 0; i < leng; i++ ){
			               		num++;
			               		//安卓这块拿到的是地址，不是base64等具体图片数据
			                	wxLoadImage._showImage(localIds[i],num)
			                }
			            }
                    }
                });
            })
		},
		//IOS处理
		_getIosImage:function(e,num){
			var iosLocalId = [];
			wx.getLocalImgData({
                localId: e, // 图片的localID
                success: function (res) {                    
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下 
                    iosLocalId.push(localData);
                    for(var i = 0; i < iosLocalId.length; i++){
                        wxLoadImage._showImage(iosLocalId[i],num)
                    }      
                },fail:function(res){
                  alert("显示失败");
                }
            });
		},
		//展示图片
		_showImage:function(data,num){
			var html = '';
			wxLoadImage.picId.before(html);
			var parentDiv = wxLoadImage.picId.parent();
			var smallImage = parentDiv.find('.smallImage');
			var smallImageLen = smallImage.length;
			if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {
				if(smallImageLen>=2){
					parentDiv.find('.onePhoto').hide();
				}
			}else if (wxLoadImage.picId.parent().hasClass('validateInfo')) {
				if(smallImageLen>=10){
					parentDiv.find('.onePhoto').hide();
				}
			}else if(wxLoadImage.picId.parent().hasClass('noPicLimit1')){
				if(smallImageLen>=14){
					parentDiv.find('.onePhoto').hide();
				}
			}
			console.log(data)
			$('#smallImage_' + num).attr('src',data)
			console.log($('#smallImage_' + num).attr('src'))
			wxLoadImage._deletePhoto(num)
			wxLoadImage._onLoadPhoto("#addPhoto_" + num, data);
			setTimeout(function() {
				myScroll2.refresh();
			}, 300);
		},
		//上传图片，因为安卓src那块塞得是地址，不是具体的图片数据，所以不能直接调用别的接口上传图片数据流。这块可以将获取到的微信数据上传到服务器，然后让后端再去服务器上下载下来，存到本地服务器
		_syncUpload:function(localIds){
            var localId = localIds.pop();
            wx.uploadImage({
                localId: localId,//需要上传的本地ID
                isShowProgressTips:0,
                success: function (res) {
                    var serverId = res.serverId; // 返回图片的服务器端ID
                    serverids.push(serverId);
                    //其他对serverId做处理的代码
                    if(localIds.length > 0){
                        syncUpload(localIds);
                    }
                    if(leng==serverids.length){
                        var json = {};
                        for(var i=0;i windowWidth) {
						var proportion = windowWidth / width;
						width = windowWidth;
						height = height * proportion;
					} else if (width < windowWidth) {
						left = (windowWidth - width) / 2;
					}
					if (height < windowHeight) {
						top = (windowHeight - height) / 2;
					}
					var html = '';
					html += '
';
					html += '
';
					html += '';
					html += '
';

					$('body').append(html);
					$('#preImg').bind('click', function() {
						$('#preImg').hide();
						$('#preImg').unbind('click');
						$('#preImg').remove();
					});
					setTimeout(function() {
						$('#preImg').show();
					}, 200);
				} catch (e) {
					alert(e.name + '  ' + e.message);
				}
			});
		}
	}