• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序图片上传预览删除(记录)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<!-- 图片凭证 -->
				<view class="com-pic-box">
					<view class="com-pic-title">图片凭证</view>
					<view class="flex flex_w">
						<!-- 图片预览部分 -->
						<view class="com-image-box" 
						:key="index"
						v-for="(item,index) in picList">
							<image class="com-image-cancel"
							@click="cancel_img(index)"
							 src="/static/icon/cancel.png" mode=""></image>
							<image :src="item"
							@click="preview_img"
							 class="com-pic-select" mode=""></image>
						</view>
						<view class="com-pic-select flex flex_c" @click="select_pic">
							<image src="/static/icon/add2.png" mode=""></image>
						</view>
					</view>
				</view>

  

// 图片上传
			select_pic() {
				var that = this;
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: [\'original\', \'compressed\'], //可以指定是原图还是压缩图,默认二者都有
				    // sourceType: [\'album\'], //从相册选择
				    success(res) {
								// console.log(res.tempFilePaths)
				    //     console.log(JSON.stringify(res.tempFilePaths));
								that.picList = res.tempFilePaths
				    }
				});
			},
			// 图片预览功能
			preview_img() {
				uni.previewImage({
					urls: this.picList,
					longPressActions: {
							itemList: [\'发送给朋友\', \'保存图片\', \'收藏\'],
							success: function(data) {
									console.log(\'选中了第\' + (data.tapIndex + 1) + \'个按钮,第\' + (data.index + 1) + \'张图片\');
							},
							fail: function(err) {
									console.log(err.errMsg);
							}
					}
			});
			},
			// 删除图片
			cancel_img(index) {
				this.picList.splice(index,1)
			}

  最后data变量   picList: [], // 图片预览路径

css

.com-pic-box{
		.com-pic-title{
			font-size:24rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(0,0,0,1);
			line-height:24rpx;
			margin:46rpx 0 36rpx;
		}
		.com-pic-select{
			width: 140rpx;
			height:140rpx;
			margin:10rpx;
			border-radius:6rpx;
			border:1rpx solid rgba(210,210,210,1);
			>image{
				width: 40rpx;
				height:40rpx;
			}
		}
		.com-image-box{
			position: relative;
			.com-image-cancel{
				width: 30rpx;
				height:30rpx;
				position: absolute;
				right:0;
				top:0;
				z-index: 1;
				opacity: .8;
			}
		}
	}

  

效果图如下

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发之真机预览发布时间:2022-07-18
下一篇:
初探天猫精灵小程序开发发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap