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

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

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

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

图片轮播：

index.js

var app = 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('onLoad Test');

}

})

注：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:

var app = getApp()

Page({

data:{

// text:"这是一个页面"

source: '',

tt:false

},

/**

* 选择相册或者相机 配合上传图片接口用

*/

onLoad: function() {

var that = this;

wx.chooseImage({

count: 1,

//original原图，compressed压缩图

sizeType: ['original'],

//album来源相册 cameraSuIxTmi相机

sourceType: ['album', 'camera'],

//成功时会回调

success: function(res) {

//重绘视图

that.setData({

source: res.tempFilePaths,

tt:true

})

/* var tempFilePaths = res.tempFilePaths

wx.uploadFile({

url: 'https://', //仅为示例，非真实的接口地址

filePath: tempFilePaths[0],

name: 'file',

formData:{

'user': 'test'

},

success: function(res){

var data = res.data

//do something

}

})*/

}

})

},

/*onHide:function(){

this.setData({

source:''

}http://)

}*/

})

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

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。