微信公众号开发之商户注册功能-拍照、上传图片（一）

微信公众号中开发一个商户注册功能，没有难点，只是页面排版、微信的一些控件（扫码、上传图片）不熟悉可能会花一点时间。

商户注册功能分两页：第一页填写手机号，获取验证码，输入验证码，输入密码和确认密码，点击下一步，然后填写商户名称，上传商户营业执照和门店照片，扫描我们给商户的收款二维码用来绑定商户号，点击确定保存即商户注册成功。

先说下上传图片功能，刚开始直接做的是用type是file的input来选择手机图片。

var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
// 1024KB，也就是 1MB
var maxSize = 1024 * 1024;
// 图片最大宽度
var maxWidth = 300;
// 最大上传图片数量
var maxCount = 2;
$('.js_file').on('change', function(event) {
var files = event.target.files;

// 如果没有选中文件，直接返回
if (files.length === 0) {
return;
}

for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();

// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.weui.alert({
text: '该类型不允许上传'
});
continue;
}

if (file.size > maxSize) {
$.weui.alert({
text: '图片太大，不允许上传'
});
continue;
}

if ($('.weui_uploader_file').length >= maxCount) {
$.weui.alert({
text: '最多只能上传' + maxCount + '张图片'
});
return;
}

reader.onload = function(e) {
var img = new Image();
img.onload = function() {
// 不要超出最大宽度
var w = Math.min(maxWidth, img.width);
// 高度按比例计算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL('image/png');

// 插入到预览区
var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
// var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"></li>');
$('.weui_uploader_files').append($preview);
var num = $('.weui_uploader_file').length;
$('.js_counter').text(num + '/' + maxCount);

// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
var progress = 0;
function uploading() {
$preview.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 10);
} else {
// 如果是失败，塞一个失败图标
//$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
}
}
setTimeout(uploading, 10);
};
img.src = e.target.result;

if($("#licenceImg").val() == ''){
$("#licenceImg").val(img.src);
}else {
$("#storeImg").val(img.src);
}

//encodeURIComponent处理数据，否则后台接收到的数据会不一致
// $.post('/merchant/register/uploadlicence', 'fileStr=' + encodeURIComponent(img.src),
//     function (res) {
//         if(res.code == 1){
//             $.toast(res.message, 'text');
//             // popupsForSkip('发起提现成功', '/merchant/personal');
//         }else {
//             fail(res.message);
//         }
//     }, 'json');

};
reader.readAsDataURL(file);
}
});

这种方式上传图片，是选择图片后，会获得图片的base64数据，然后在后台将数据转为图片并保存到服务器上。而且ajax提交数据的时候对数据还要用encodeURIComponent处理一下，否则在后台获取到的数据可能会出现错误导致转图片时失败。

这种方式完成上传图片后，被无情的驳回。理由是对于用户体验不友好，假如说用户来注册商户了，当他到了上传图片这一步的时候发现自己还没有拍照片，岂不是要返回拍个照片后再来上传。

于是改，让商户既能拍照也能选择照片。微信专门的接口来做这件事。

1、首先这几个值要有：

var timestamp = $("#timestamp").val();//时间戳
var nonceStr = $("#nonceStr").val();//随机串
var signature = $("#signature").val();//签名
var appId = $("#appId").val();//公众号appid

wx.config({
debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId : appId, // 必填，公众号的唯一标识
timestamp : timestamp, // 必填，生成签名的时间戳
nonceStr : nonceStr, // 必填，生成签名的随机串
signature : signature,// 必填，签名，见附录1
jsApiList : [ 'scanQRCode','chooseImage','uploadImage' ]
});

其中jsApList是调用功能所需的权限值。这三个分别是：扫码、选择图片、上传图片

按钮点击事件：

wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
$("#uploadLicence").remove();
var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

syncUpload(localIds,"previewLicence");
}
});

上传到微信服务器，并返回服务器端ID：

//上传图片到微信服务器，并返回服务器端ID
var syncUpload = function (localIds,ulName) {
wx.uploadImage({
localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
uploadServerId(serverId,ulName);
}
});
};

上传图片到我们的服务器，并返回图片路径，js组装后显示在页面：

//异步上传图片id到服务器，服务器返回真正的图片地址，js组装后显示在页面上
var uploadServerId = function (serverId,ulName) {
$.post('/merchant/register/uploadimg', 'mediaId=' + serverId,
function (res) {
if(res.code == 1){
$.toast(res.message, 'text');
var url = res.data;
var licenceImg = "<img style='width:60px;height: 60px;' class='weui_uploader_file' src='"+url+"'/>";
$("#"+ulName).append(licenceImg);
if(ulName == 'previewLicence'){
$("#licenceImg").val(url);
$("#js_counter_licence").html("(1/1)");
$("#licencediv").remove();
}else {
$("#storeImg").val(url);
$("#js_counter_store").html("(1/1)");
$("#uploadStoreImg").hide();
$("#storediv").remove();
}
}else {
fail(res.message);
}
}, 'json');
};

后台得到mediaId去微信服务器拿到图片，然后写到本地服务器上：

@PostMapping("/uploadimg")
public @ResponseBody WebResponse uploadimg(String mediaId) throws Exception{
String tokenMsg = WxTokeanUtil.getToken();
String rootPath = new FileOperation().getRootPath();
File shopImage = new File(rootPath+File.separator+"assets/shopImage");
if(!shopImage.exists() || !shopImage.isDirectory()){
shopImage.mkdirs();
}
UUID uuid = UUID.randomUUID();
String imageName = uuid.toString();
String imageType = ".jpg";
InputStream inputStream = getInputStream(tokenMsg,mediaId);
byte[] data = new byte[10240];
int len = 0;
FileOutputStream fileOutputStream = null;
try {
fileOutputStream = new FileOutputStream(rootPath+File.separator+"assets/shopImage"+File.separator+imageName+imageType);
while ((len = inputStream.read(data))!= -1){
fileOutputStream.write(data, 0, len);
}
}catch (Exception e){
e.printStackTrace();
}finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (fileOutputStream != null) {
try {
fileOutputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return WebResponse.getWebResponse(true,"上传成功","/assets/shopImage"+File.separator+imageName+imageType);
}

public static InputStream getInputStream(String accessToken, String mediaId) {
InputStream is = null;
String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token="
+ accessToken + "&media_id=" + mediaId;
try {
URL urlGet = new URL(url);
HttpsURLConnection http = (HttpsURLConnection) urlGet
.openConnection();
http.setRequestMethod("GET"); // 必须是get方式请求
http.setRequestProperty("Content-Type",
"application/x-www-form-urlencoded");
http.setDoOutput(true);
http.setDoInput(true);
//            System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
//            System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
http.connect();
// 获取文件转化为byte流
is = http.getInputStream();

} catch (Exception e) {
e.printStackTrace();
}
return is;

}

到此图片的拍照、上传功能实现。