概述
需求：
1.调用微信jsSDK选图或者拍照（选图支持选多图）
2.选图或者拍照后提供预览，但不把图片下载到服务器
3.提交表单的时候再一并提交，把图片下载到服务器
4.支持编辑页面删除已选图片（此图已经删除到微信服务器）
5.回到数据列表页后，支持点击预览wx.previewImage
（不建议使用原生的input type=file、enctype="multipart/form-data"的形式进行上传）
我的思路（关于需求1、2、3）：
1.需要初始化jsSDK。
2.点击某个按钮，调用wx.chooseImage给用户展示选图、拍照的选择。
3.用户选择多图或者拍照操作完成后（wx.uploadImage回调中），上传这些图片到微信服务器，同时执行预览的渲染操作。
4.点击保存按钮，提交最后确认的几个图片，访问后台进行图片、数据的保存操作
注：关于java如何保存微信服务器的图片，请参考我的博客《微信网页开发获取token,下载微信服务器上的临时图片》
前端代码：
var basePath = "/demoProject/";
/**常量配置*/
var UPDOC_CONST = {
MAX_FILE_NUM : 9//每个动态上传文件的个数
}
//定义后台访问的入口
var srvPaths = {
WXJSSDKCONFIG: basePath + "wx/jsSdk/config"//获取微信jsSdk配置
}
/*--------------------------------------------------------------共用service--------------------------------------------------------------*/
var updocSrv_Commen = {/**共用*/
getWxJsSdkConfig : function(params,s,f){
$.post(srvPaths.WXJSSDKCONFIG,params||{},function(res){
res&&res.success ? s&&s(res) : f&&f(res);
});
}
}
/*--------------------------------------------------------------END共用service--------------------------------------------------------------*/
/*--------------------------------------------------------------JS-SDK--------------------------------------------------------------*/
/*图片接口参考：https://blog.csdn.net/fengqingtao2008/article/details/51469705*/
var updoc_wxJsSdk = {
/**注入SDK权限配置【思路第1步】*/
iniWxJsSDK : function(){
var _this = this;
//通过config接口注入权限验证配置
updocSrv_Commen.getWxJsSdkConfig({url:location.href},function(res){
var c = res.result;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: c.appid, // 必填，公众号的唯一标识
timestamp: c.timestamp, // 必填，生成签名的时间戳
nonceStr: c.noncestr, // 必填，生成签名的随机串
signature: c.signature,// 必填，签名，见附录1
jsApiList: ["chooseImage","previewImage","uploadImage","downloadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
});
},/**（编辑表单页面）上传图片第1步@param call 选图后的回调函数*/
onChooseImage : function(call){
var _this = this;
var tmpl = '<li class="weui-uploader__file" data-src="#url#"><img src="#url#" style="width: 100%;max-height: 100%;"></li>'
//点击“选图、拍照”按钮触发：【思路第2步】
$("body").on("click",".uploaderInput",function(){
var $input = $(this);
var len = $input.closest(".weui-uploader__bd").find(".weui-uploader__files li").length;//已经选了几张？
if(len >= UPDOC_CONST.MAX_FILE_NUM){
return false;
}
var max = UPDOC_CONST.MAX_FILE_NUM - len;//还能选几张图？
console.log("wx.chooseImage");
wx.chooseImage({
count: max, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {//【思路第三步】
var localIds = res.localIds;
/*这一段是处理页面预览
* for (i in localIds) {
var src = localIds[i];
$input.closest(".weui-uploader__bd").find(".weui-uploader__files").append($(tmpl.replace('#url#', src).replace('#url#', src)));
}
//是否继续显示上传“+”按钮
len = $input.closest(".weui-uploader__bd").find(".weui-uploader__files li").length;//已经选了几张？
if(len >= UPDOC_CONST.MAX_FILE_NUM){
$input.closest(".weui-uploader__input-box").hide();
}
var serverIds = [];*/
_this.uploadImage(localIds,serverIds,call);
}
});
});
},/**（编辑表单页面）上传图片第2步：上传（微信服务器）（uploadImage接口是异步的，但不能同时调用多次，多图需要排队。）*/
uploadImage : function(localIds,serverIds,call){
var _this = this;
if(localIds.length == 0){
//所选图全部上传成功了
console.log("全部上传成功serverIds："+serverIds);
call && call(serverIds);
}else{
var localId = localIds.pop();
console.log("wx.uploadImage");
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
serverIds.push(res.serverId); 返回图片的服务器端ID
console.log("排队上传图片到微信服务器成功serverId："+res.serverId);
_this.uploadImage(localIds,serverIds,call);
}
});
}
},/**（编辑表单页面）配合onTapShowDelSheet，点击删除*/
onDelFiles : function(call){
var max = UPDOC_CONST.MAX_FILE_NUM;
//确认删除某一个图
$("body").on("click","#iosDelImgActionsheet .del-btn",function(e){
$('#iosDelImgActionsheet').removeClass('weui-actionsheet_toggle');
$('#iosDelImgMask').fadeOut(200);
var index = $(this).attr("data-index");
index = index?parseInt(index):-1;
$(".attachsPreviewWitchDel li").eq(index).remove();
var l = $(".weui-uploader__bd .weui-uploader__files li").length;
if(l < max){
$(".weui-uploader__bd .weui-uploader__input-box").show();
}
call&&call(index);
})
},/**（编辑表单页面）点击一个图，给出删除提示：ActionSheet*/
onTapShowDelSheet : function(){
var _this = this;
$("body").on("click",".attachsPreviewWitchDel li",function(){
var index = $(this).index();
$('#iosDelImgActionsheet').remove();
$('#iosDelImgMask').remove();
var tpl = '<div class="weui-mask" id="iosDelImgMask" style="opacity: 0; display: none;"></div> <div class="weui-actionsheet" id="iosDelImgActionsheet"> <div class="weui-actionsheet__title"> <p class="weui-actionsheet__title-text">删除此图片</p> </div> <div class="weui-actionsheet__menu"> <div class="weui-actionsheet__cell weui-cell_warn del-btn" data-index="{{data-index}}">删除</div> </div> <div class="weui-actionsheet__action"> <div class="weui-actionsheet__cell" id="iosDelImgActionsheetCancel">取消</div> </div> </div>';
$("body").append(tpl.replace("{{data-index}}",index));
var $iosActionsheet = $('#iosDelImgActionsheet');
var $iosMask = $('#iosDelImgMask');
function showActionSheet() {
$iosActionsheet.addClass('weui-actionsheet_toggle');
$iosMask.fadeIn(200);
}
function hideActionSheet() {
$iosActionsheet.removeClass('weui-actionsheet_toggle');
$iosMask.fadeOut(200);
}
setTimeout(function(){
showActionSheet()
},100);
$iosMask.on('click', hideActionSheet);
$('#iosDelImgActionsheetCancel').on('click', hideActionSheet);
});
},/**（数据列表页面）点击附件，打开预览*/
onPreview : function(){
var _this = this;
$("body").on("click",".attachsPreview li",function(){
var lis = $(this).parent().find("li");
var urls = [];
$(lis).each(function(i){
var url = $(this).attr("data-src");
if(url.indexOf("http")!=0 && url.indexOf("https")!=0){
//我们数据库存的相对路径，所以需要处理：url = domain + url;
}
urls.push(url);
})
wx.previewImage({
current: urls[$(this).index()] , // 当前显示图片的http链接$(this).attr("data-src")
urls: urls // 需要预览的图片http链接列表
});
});
},
init : function(){
this.iniWxJsSDK();
this.onPreview();
this.onTapShowDelSheet();
//this.onChooseImage();
}
}
/*--------------------------------------------------------------END JS-SDK--------------------------------------------------------------*/
/*--------------------------------------------------------------班级荣誉save--------------------------------------------------------------*/
var updocCtrl_ClassSaveRongyu = {
box : "#classSaveRongyuBox",
serverIds : [],//注意：wx.chooseImage所选图最终放到这里
/**点击发布【思路第四部】*/
onSave : function(){
var _this = this;
$("body").on("click","#saveFormBtn",function(){
var formData = new FormData($("#saveForm")[0]);
for (var i = 0; i < _this.serverIds.length; i++) {
if(i<UPDOC_CONST.MAX_FILE_NUM){
formData.append("serverIds", _this.serverIds[i]);
}
}
/*这里提交表单，请求后台
* updocSrv_Feed.add(formData,function(res){
TjDialog.msg("发布成功",500,function(){
location.href = srvPaths.CLASSRONGYU;
});
},function(res){
res.msg&&TjDialog.alert(res.msg);
})*/
});
},/**选择文件*/
onChooseImage : function(){
var _this = this;
updoc_wxJsSdk.onChooseImage(function(serverIds){
for (var i = 0; i < serverIds.length; i++) {
_this.serverIds.push(serverIds[i]);
}
})
},/**点击删除文件*/
onDelFiles : function(){
var _this = this;
updoc_wxJsSdk.onDelFiles(function(index){
_this.serverIds.splice(index, 1);
});
},
init : function(){
if($(this.box).length == 0){return false;}
this.onSave();
this.onChooseImage();
this.onDelFiles();
}
}
/*--------------------------------------------------------------END班级荣誉save--------------------------------------------------------------*/
/**===========上面定义了updoc_wxJsSdk、updocCtrl_ClassSaveRongyu，但是如何调用？===========*/
/**===========初始化微信jsSDK、初始化updocCtrl_ClassSaveRongyu===========*/
updoc_wxJsSdk.init();
updocCtrl_ClassSaveRongyu.init();另外：需求4、5的实现方式，请参考js代码 对象中的以下方法：onDelFiles()、onTapShowDelSheet()、onPreview()
有何疑问或见解，欢迎各位大佬留言~
最后
以上就是缓慢蜗牛为你收集整理的微信网页开发wx.chooseImage多图上传、预览（已解决）的全部内容，希望文章能够帮你解决微信网页开发wx.chooseImage多图上传、预览（已解决）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复