小程序中使用上传图片，显示、删除、预览

一、功能介绍

需要哦用户点击加号上传图片，并展示所上传图片和能够删除和预览

二、功能实现

采用的uniapp，创建了一个view容器包裹加号图标和展示的图片。

内部展示图片超过9张时候，加号图片隐藏

		<view class="img-list">
            //图片显示列表，循环展示
			<view v-for="(item,index) in pushData.photoList" 
            :key='index' class="img-list-box">
			//图片展示和图片点击唤醒uni的预览删除
            <image :src="item" mode="aspectFit" 
             class="img-item" @tap="imgTypeSelect(item)">
            </image>
			</view>
            //加号添加图，样式自定义就好
			<view v-if="pushData.photoList.length < 9" 
                class="icon-camera" 
                @tap="selectType">
			</view>
		</view>

点击加号

唤起uni的向上弹出操作菜单

uni.showActionSheet(OBJECT)

点击后又使用看图片选择API

从底部向上弹出操作菜单

OBJECT参数说明

popover 值说明（仅App生效）

success返回参数说明

示例

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

实际代码

selectType() {
	let that = this
	let itemL = ['拍照', '从相册选择照片']
				uni.showActionSheet({
					itemList: itemL,
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								sourceType: ['camera'], // 拍照选择
								success: function(res) {
									res.tempFilePaths.forEach(path => {
										uni.uploadFile({
										    url: '11111111', //后端接口地址
											filePath: path,
											name: 'file',
											formData: {
											
											},
											header: {
												'content-type': 'multipart/form-data',
											},
											success: function(uploadFile) {
												let uploadFiles = JSON.parse(
													uploadFile.data)
												that.pushData.photoList.push(
													uploadFiles.data);
											}
										})
									})
								}
							});
						}
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 9 - that.pushData.photoList.length,
								sourceType: ['album'], //从相册选择
								success: function(res) {
									res.tempFilePaths.forEach(path => {
										uni.uploadFile({
											url: 'https:1111111', //后端接口地址
											filePath: path,
											name: 'file',
											formData: {
											},
											header: {
												'content-type': 'multipart/form-data',
											},
											success: function(uploadFile) {
												let uploadFiles = JSON.parse(
													uploadFile.data)
												that.pushData.photoList.push(
													uploadFiles.data);
											}
										})
									})
								}
							});
						}

从本地相册选择图片或使用相机拍照。

uni.chooseImage(OBJECT)

App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera

微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。

OBJECT 参数说明

crop 参数说明

success 返回参数说明

File 对象结构如下

选择图片后继续调用上传接口

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考：uni-app 选择和上传非图像、视频文件 – DCloud问答。

OBJECT 参数说明

注意：

• App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。

files参数说明

files 参数是一个 file 对象的数组，file 对象的结构如下：

success 返回参数说明

展示 图片和图片的点击预览删除

将图片上传后，获取到每一张上传的图片返回地址，push到展示的图片列表中

	<image :src="item" mode="aspectFit" 
         class="img-item"
         @tap="imgTypeSelect(item)">
    </image>

点击图片后再次调用向上弹出交互API:uni.showActionSheet

利用点击图片本身的url进行数组寻找，点击预览调用

uni.previewImage(OBJECT)

预览图片。

这里对图片只是一个展示用，所以将存入的图片列表放入就可以预览

其他转发之类的需求可以参考文档中的

点击删除按钮，则根据url寻找index进行列表的截取 

// 图片状态选择
imgTypeSelect(item) {
		let that = this
			uni.showActionSheet({
				itemList: ['预览', '删除'],
				success: function(res) {
					if (res.tapIndex == 0) {
						console.log('删除1', that.pushData.photoList);
						uni.previewImage({
							current: item,
							urls: that.pushData.photoList
						})
					}
					if (res.tapIndex == 1) {
						let index = that.pushData.photoList.findIndex(url => 
                          url === item);
						if (index !== -1) {
							that.pushData.photoList.splice(index, 1);
						}
						}
					}
				});
			},

不太美观的css 

添加图标的css是采用背景图，自行替换或使用别的写法

.icon-camera {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 210rpx;
		border-radius: 6rpx;
		margin: 5rpx 0rpx 0rpx 5rpx;
		background-color: #f4f5f7;
		// image{
		// 	width: 100%;
		// 	height: 100%;
		// }
		background: url('../iconadd.png');
		background-size: 100%;
	}

	// 媒体列表
	.img-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.img-list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.img-item {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx;
		border-radius: 6rpx
	}

代码007普通

打赏 收藏 海报 链接