(前端)微信公众号开发+layim上传图片

1、调用微信上传图片

//获取配置
wx.config({
debug: false,
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名，见附录1
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage'
]  // 必填，需要使用的JS接口列表，所有JS接口列表见微信公众平台附录
});

//调用选择图片‘chooseImage’接口
function uploadImg(insert, send, othis) {
wx.checkJsApi({
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage'
],
success: function (res) {
if (res.checkResult.chooseImage && res.checkResult.uploadImage) {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var len = localIds.length;
for (var i = 0; i < len; i++) {
wx.uploadImage({
localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
layui.use('upload', function(){
var thatChat = othis;
//执行实例
$.ajax({
type: "get",
url : '（后台下载图片到服务器的URL）?mediaId='+serverId,
async: false,
success: function(res){
if(res.code == 0){
insert('img['+ (res.url||'') +']'); //将内容插入到编辑器，主要由insert完成
send(); //自动发送该条内容
} else {
layer.msg(res.msg||'上传失败');
}
},
dataType : "json"
});
});
},
fail: function (error) {
$.toast('上传错误,请稍候重试!', 'text');
}
});
}
},
fail:function(res) {
alert("fail" + JSON.stringify(res));
}
});
}
},
fail: function(error) {
$.alert(error)
}
});
}

2、使用layim扩展工具栏的方法，添加一个上传图片的工具

//在layim.config中设定好要扩展的图标、名称等信息
layim.config({
tool: [{
alias: 'uploadImg' //工具别名
,title: '上传图片' //工具名称
,iconUnicode: '' //图标字体的unicode，可不填
,iconClass: '' //图标字体的class类名
}]
})
//监听该工具事件
layim.on('tool(uploadImg)', function(insert, send, obj){ //事件中的tool为固定字符，而code则为过滤器，对应的是工具别名（alias）
uploadImg(insert, send, obj)
});

• 点赞
• 收藏
• 分享
• 文章举报