HTML部分如下: 

<view class="uPImg">
            <view class="Img">上传照片 :</view>
            <!-- 上传图片 -->
            <view class="shangchuan">
                <view class="sc2" v-for="(item, index) in imgList" :key="index">
                    <image class="del" @click="del(index)" src="../../static/del.png" mode=""></image>
                    <image class="Img3" :src="item" mode=""></image>
                </view>
                <view class="sc2" v-if="imgList.length < 3" @click="upload"><image class="sc3" src="../../static/upload.png" mode=""></image></view>
            </view>
        </view>

 附带图片:

 

 Css:

.shangchuan {
	width: 90%;
	height: 200rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	.sc2 {
		width: 30%;
		height: 90%;
		border-radius: 10rpx;
		background-color: #dadfef;
		text-align: center;
		line-height: 240rpx;
		margin: 0 10rpx;
		position: relative;
		// background-color: #4CD964;
	}
	.Img3 {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.del {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		z-index: 1000;
		top: 0rpx;
		right: 0;
	}
	.sc3 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}
}

js部分: 

// 点击上传图片
		upload() {
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					if (res.tempFilePaths.length != 0) {
						this.imgList.push(res.tempFilePaths[0]);
					}
			 	console.log(JSON.stringify(res.tempFilePaths));
					var tempFilePaths = res.tempFilePaths;

					console.log(tempFilePaths);
					console.log(tempFilePaths[0]);
					uni.uploadFile({
						url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							console.log('上传图片', JSON.parse(uploadFileRes.data));
						},
						fail(err) {
							console.log(err);
						}
					});
				}
			});
		},

      // 删除图片
		del(index) {
			this.imgList.splice(index, 1);
			console.log(this.imgList);
		},

最后结果:

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐