微信小程序> 微信小程序上传图片,微信小程序实现图片上传

微信小程序上传图片,微信小程序实现图片上传

浏览量:413 时间: 来源:优睿
如图:



直接上代码:
wxml:
view
view
view图片上传/view
/view
view
blockwx:for="{{imagesList}}"wx:key="this"
view
imagesrc="{{item}}"/image
/view
/block
view
inputtype="file"accept="image/jpg,image/jpeg,image/png,image/gif"multiple=""bindtap='uploader'name="images"/input
/view
/view
/view
js:
//图片上传
uploader:function(){
varthat=this;
letimagesList=[];
letmaxSize=10241024;
letmaxLength=3;
letflag=true;
wx.chooseImage({
count:6,//最多可以选择的图片总数
sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
success:function(res){
wx.showToast({
title:'正在上传...',
icon:'loading',
mask:true,
duration:500
})
for(leti=0;ires.tempFiles.length;i++){
if(res.tempFiles[i].sizemaxSize){
flag=false;
console.log(111)
wx.showModal({
content:'图片太大,不允许上传',
showCancel:false,
success:function(res){
if(res.confirm){
console.log('用户点击确定')
}
}
});
}
}
if(res.tempFiles.lengthmaxLength){
console.log('222');
wx.showModal({
content:'最多能上传'+maxLength+'张图片',
showCancel:false,
success:function(res){
if(res.confirm){
console.log('确定');
}
}
})
}
if(flag==true&&res.tempFiles.length=maxLength){
that.setData({
imagesList:res.tempFilePaths
})
}
wx.uploadFile({
url:'https://shop.gxyourui.cn',
filePath:res.tempFilePaths[0],
name:'images',
header:{
"Content-Type":"multipart/form-data",
'Content-Type':'application/json'
},
success:function(data){
console.log(data);
},
fail:function(data){
console.log(data);
}
})
console.log(res);
},
fail:function(res){
console.log(res);
}
})
},
更多技术问题,请看:

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎