小程序实现选择图片九宫格带预览

2019独角兽企业重金招聘Python工程师标准>>>

效果图

数据：

依赖接口wx.upload、chooseImage与preview 数据请求通过LeanCloud完成

图片选择：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject

前端处理：

1.保存images数组为已选择图片 2.选择了更多图片后concat数组 3.预览图集 4.leancloud上传多图，目测顺序一致

js代码

const AV = require('../../../utils/av-weapp.js')
var that;
Page({
	data: {
		images: [],
		uploadedImages: [],
		imageWidth: getApp().screenWidth / 4 - 10
	},
	onLoad: function (options) {
		that = this;
		var objectId = options.objectId;
		console.log(objectId);
	},
	chooseImage: function () {
		// 选择图片
		wx.chooseImage({
			sizeType: ['compressed'], 
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function (res) {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				var tempFilePaths = res.tempFilePaths;
				console.log(tempFilePaths);
				that.setData({
					images: that.data.images.concat(tempFilePaths)
				});
			}
		})
	},
	previewImage: function () {
		// 预览图集
		wx.previewImage({
			urls: that.data.images
		});
	},
	submit: function () {
		// 提交图片，事先遍历图集数组
		that.data.images.forEach(function (tempFilePath) {
			new AV.File('file-name', {
				blob: {
					uri: tempFilePath,
				},
			}).save().then(
				// file => console.log(file.url())
				function(file) {
					// 先读取
					var uploadedImages = that.data.uploadedImages;
					uploadedImages.push(file.url());
					// 再写入
					that.setData({
						uploadedImages: uploadedImages
					});
					console.log(uploadedImages);
				}
			).catch(console.error);
		});
		wx.showToast({
			title: '评价成功',
			success: function () {
				wx.navigateBack();
			}
		});
	},
	delete: function (e) {
		var index = e.currentTarget.dataset.index;
		var images = that.data.images;
		images.splice(index, 1);
		that.setData({
			images: images
		});
	}
})

wxml代码

<view class="gallery">
	<view class="item" wx:for="{{images}}" wx:key="">
		<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src=" {{item}}" bindtap="previewImage" mode="aspectFill" />
		<!-- 删除按钮 -->
		<view class="delete" bindtap="delete" data-index="{{index}}"><image style="left: {{imageWidth / 2 - 10}}px;" src="/images/icon_delete.png" /></view>
	</view>
	<view class="item">
		<image style="width: {{imageWidth}}px; height: {{imageWidth}}px" src="/images/icon_add.png" class="button-upload" bindtap="chooseImage" />
	</view>
</view>
<button type="primary" bindtap="submit">提交</button>

wxss代码

/*画廊*/
.gallery {
	/*margin-bottom: 100rpx;*/
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

/*每张图片所占容器*/
.item {
	position: relative;
	margin: 5px;
}

/*删除按钮*/
.delete {
	position: absolute;
	height: 20px;
	bottom: 0;
	width: 100%;
	background: #ccc;
	opacity: .8;
}

.delete image {
	position: absolute;
	width: 20px;
	height: 20px;
}

源码下载：http://git.oschina.net/dotton/lendoo-wx，本文涉及代码存于/pages/member/evalute文件夹中。

转载于:https://my.oschina.net/huangxiujie/blog/994858