微信小程序 - 照片选择（使用base64上传）

目录

效果图

实现代码

 将选中的图片转换成bese64码

---

效果图

（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
});