小程序weui Uploader上传组件

2018年09月18日 08:37 | 100次浏览 作者原创 版权保护

在做项目的时候难免要上传一些图片的业务,本章节介绍微信小程序weui Uploader上传组件,weui本身就是个UI框架,故此文章未实现后台上传功能,仅仅是页面效果展示UI的实现。

一、在pages目录中新建目录uploader以及文件uploader.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Uploader</view>
<view class="page__desc">上传组件(www.vxzsk.com V型知识库原创)</view>
</view>
<view class="page__bd">
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">图片上传</view>
<view class="weui-uploader__info">{{files.length}}/2</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
</view>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" /> 
</view>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
</view>
<view class="weui-uploader__file weui-uploader__file_status">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
<view class="weui-uploader__file-content">
<icon type="warn" size="23" color="#F43530"></icon>
</view>
</view>
<view class="weui-uploader__file weui-uploader__file_status">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
<view class="weui-uploader__file-content">50%</view>
</view>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>

上述代码23行等需要组件页面背景图,故在pages目录下的images下放一个背景图片,例如:

二、在根目录app.json配置文件中配置uploader文件路径,保存后会自动生成对应的js等文件

"pages/uploader/uploader",


三、打开uploader.js,添加页面效果实现代码

1、首先全局变量

/**
   * 页面的初始数据
   */
data: {
files: []
},


2、选择图片js代码实现

chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},


3、预览图片js代码实现

previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
}


四、预览效果

点红色击箭头所示添加图片,然后选择一个图片,上传预览效果如下:


五、weui Uploader实现源码

uploader.wxml源码请查看第一步


uploader.js源码

// pages/uploader/uploader.js V型知识库原创 www.vxzsk.com
Page({

/**
   * 页面的初始数据
   */
data: {
files: []
},

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

},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {

},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {

},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {

},

/**
   * 生命周期函数--监听页面卸载
   */
onUnload: function () {

},

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
onPullDownRefresh: function () {

},

/**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () {

},

/**
   * 用户点击右上角分享
   */
onShareAppMessage: function () {

},
/**
V型知识库原创 www.vxzsk.com
***/
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
}
})


此文章本站原创,地址 https://www.vxzsk.com/1892.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程