微客导航 » 文章资讯 » 微信小程序实现图片上传

微信小程序实现图片上传

2023-08-23 03:28:04 170

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下/p>

图片上传服务器：

wxml


上传图片

wxss

Page({

/**
*页面的初始数据
*/
data:{
imgs:[],//本地图片地址数组
picPaths:[],//网络路径
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},
//添加上传图片
chooseImageTap:function(){
varthat=this;
wx.showActionSheet({
itemList:['从相册中选择','拍照'],
itemColor:"#00000",
success:function(res){
if(!res.cancel){
if(res.tapIndex==0){
that.chooseWxImage('album')
}elseif(res.tapIndex==1){
that.chooseWxImage('camera')
}
}
}
})
},
//图片本地路径
chooseWxImage:function(type){
varthat=this;
varimgsPaths=that.data.imgs;
wx.chooseImage({
sizeType:['original','compressed'],
sourceType:[type],
success:function(res){
console.log(res.tempFilePaths[0]);
that.upImgs(res.tempFilePaths[0],0)//调用上传方法
}
})
},
//上传服务器
upImgs:function(imgurl,index){
varthat=this;
wx.uploadFile({
url:'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx',//
filePath:imgurl,
name:'file',
header:{
'content-type':'multipart/form-data'
},
formData:null,
success:function(res){
console.log(res)//接口返回网络路径
vardata=JSON.parse(res.data)
that.data.picPaths.push(data['msg'])
that.setData({
picPaths:that.data.picPaths
})
console.log(that.data.picPaths)
}
})
},

})

思路很简单,多张上传的话，在upImgs方法回调做判断index++继续调用upImgs方法即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现图片上传

热门推荐

随机推荐