目录
效果图
(1)未选图片:(2)选中图片(未达到照片数量上限)
(3)图片选择(达到照片数量上限)(4)点击图片预览
实现代码
(1)wxml文件代码:
<view class="page__bd">
<view class="weui-cells__title">个人信息录入</view>
<view class="weui-cells weui-cells_after-title">
<!-- 照片 -->
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__overview">
<view class="weui-uploader__title">照片上传</view>
<view class="weui-uploader__info">{{files.length}}/4</view>
</view>
<view class="weui-uploader__tips">
上传图片吧
</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files">
<!-- 选中图片的循环展示 -->
<block wx:for="{{files}}">
<view style="position:relative" class="weui-uploader__file" bindtap="previewImage">
<!-- 选中的图片展示 -->
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
<!-- 每个图片右上角都有一个删除相应选中图片的按钮 -->
<image class="closeImg" src="/images/icon/deleteImg.png" catchtap="deleteImg" id="{{index}}"></image>
</view>
</block>
</view>
<!-- 这里限定选中图片的数量,这里<=3意思是最多选择四张图片,数量为4的时候选择图片的按钮就不显示了 -->
<view wx:if="{{files.length<=3}}" class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
(2)js的代码
Page({
/**
* 页面的初始数据
*/
data: {
files: []
},
/**
* 点击加号选择照片或者调用照相机
*/
chooseImage: function() {
var that = this;
wx.chooseImage({
count: 3, //选择照片的时候最多选X张(此处X=3)
sizeType: ['original', 'compressed'], //original:原图;compressed:压缩图
sourceType: ['album', 'camera'], //album:从相册选图;camera:使用相机
success(res) {
// tempFilePath可以作为img标签的src属性显示图片,所以要加到Data中去,进行
const tempFilePaths = res.tempFilePaths;
for (var i = 0; i < tempFilePaths.length; i++) {
var dataFile = that.data.files;
dataFile.push(tempFilePaths[i]);
debugger;
that.setData({
files: dataFile
});
}
}
})
},
/**
* 删除照片;
*/
deleteImg:function(e){
var id = e.currentTarget.id;
var dataFile = this.data.files;
// splice将图片列表中指定下标的元素剔除
dataFile.splice(id,1);
//删除list指定Index的元素
this.setData({
files: dataFile
});
},
/**
* 上传照片的预览;
*/
previewImage:function(e){
//获取要预览的图片的临时路径
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接,如果current的值为''那么预览的图片可以左右滑动,查看所有选中的图片
urls: this.data.files // 需要预览的图片http链接列表
})
}
})
(3)wxss代码
.closeImg{
position:absolute;
right: 0;
top: 0;
width: 40rpx;
height: 40rpx;
}
上述的功能只是界面上的一系列展示与点击功能实现,下面是图片转换成base64代码
将选中的图片转换成bese64码
wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
//选择照片的时候js变化
for(var i = 0 ; i < res.tempFilePaths.length; i++){
var image64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64");//获取base64码;
var imgBase64List = that.data.imgBase64List;
imgBase64List.push(image64);
that.setData({
imgBase64List : imgBase64List
});
}
//删除照片的时候js变化
var imgBase64List = that.data.imgBase64List;
imgBase64List.splice(id,1);//id为选中的图片所对应的下标;
this.setData({
imgBase64List : imgBase64List
});