微信小程序实现图片轮播及文件上传

2024-02-26 02:46:03 137

微信小程序实现图片轮播及文件上传

刚刚接触微信小程序，看着网上的资源写了个小例子，本地图片轮播以及图片上传。

图片轮播：

index.js

varapp=getApp()
Page({
data:{
mode:'aspectFit',
//src:'../images/timg1.jpg',
imgUrls:[
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',

'../images/4.jpg'
],
indicatorDots:true,//是否出现焦点
autoplay:true,//是否自动播放
interval:2000,//自动播放时间间隔
duration:1000,//滑动动画时间
userInfo:{}
},
onLoad:function(){
console.log('onLoadTest');
}
})

注：imgUrls中为本地图片数组。

index.wxml:

index.json:

{
"navigationBarTitleText":"相册"
}

index.wxss:

.slide-image{
width:100%;
height:100%;
}
.swiper_i{
text-align:center;
width:100%;
}

好了，这是图片轮播的几个文件。会在app.json中配置。

接下来是图片上传的。因为没有服务器，暂时不能上传，但是可以从本地相册或拍照获取照片。

upload.js:

varapp=getApp()
Page({
data:{
//text:"这是一个页面"
source:'',
tt:false
},
/**
*选择相册或者相机配合上传图片接口用
*/
onLoad:function(){
varthat=this;
wx.chooseImage({
count:1,
//original原图，compressed压缩图
sizeType:['original'],
//album来源相册camera相机
sourceType:['album','camera'],
//成功时会回调
success:function(res){
//重绘视图
that.setData({
source:res.tempFilePaths,
tt:true
})
/*vartempFilePaths=res.tempFilePaths
wx.uploadFile({
url:'https://',//仅为示例，非真实的接口地址
filePath:tempFilePaths[0],
name:'file',
formData:{
'user':'test'
},
success:function(res){
vardata=res.data
//dosomething
}
})*/
}
})
},
/*onHide:function(){
this.setData({
source:''
})
}*/
})

upload.json:

{
"navigationBarTitleText":"上传图片"
}

upload.wxml:




确认上传

upload.wxss:

/*pages/upload/upload.wxss*/
.Container{
text-align:center;
width:100%;
}
.image-i{
width:100%;
height:100%;
}

app.js为空。

app.json:

{
"pages":[
"pages/index/index",
"pages/upload/upload"
],
"window":{
"navigationBarTextStyle":"black",
"navigationBarTitleText":"演示2",
"navigationBarBackgroundColor":"#fbf9fe",
"backgroundColor":"#fbf9fe"
},
"networkTimeout":{
"request":10000,
"connectSocket":10000,
"uploadFile":10000,
"downloadFile":10000
},
"tabBar":{
"list":[{
"pagePath":"pages/index/index",
"text":"显示图片",
"iconPath":"pages/images/icon_API.png",
"selectedIconPath":"pages/images/icon_API_HL.png"
},{
"pagePath":"pages/upload/upload",
"text":"上传",
"iconPath":"pages/images/icon_API.png",
"selectedIconPath":"pages/images/icon_API_HL.png"
}]
},
"debug":true

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序实现图片轮播及文件上传

热门推荐

随机推荐