在做项目的时候难免要上传一些图片的业务，本章节介绍微信小程序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
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程