uni-app微信小程序关于图片上传、预览、删除操作

html

	<view class="courseAlbum">
				<view class="navBar">
					<view class="title">课程相册（{{ allImgTNum }}）view>
					<view class="more" @click="toAllImg">查看全部 >view>
				view>
				<view v-show="showImage" class="imageWrap">
					<scroll-view scroll-x class="imageBox">
						<view class="image_item"  v-for="(item, index) in imgList" :key="index" @tap="viewImage" :data-url="imgList[index]">
							
							<image :src="imgList[index]" mode="aspectFill" class="image_item">
								<view class="deletBox" @tap.stop="delImage" :data-index="index"><text>Xtext>view>
							image>
						view>
					scroll-view>
				view>
				<view class="addBtn" @tap="chooseImage">上传相册view>
			view>

js

export default {
	data() {
		return {
			imgList: [], // 线上图片地址
			allImgTNum: 0, //所有图片数量
			showImage: false,// 展示图片标识
			filePath:[], //微信小程序本地地址
		}
	},
	methods: {
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 3, //一次可以选择的数量
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册或手机选择
				success: res => {
					this.showImage = true;
					this.filePath = res.tempFilePaths
					for( let i=0;i<this.filePath.length;i++) {
						this.uploadImage(this.filePath,i)
					}
				}
			})
		},
		// 上传图片
		uploadImage(tempFilePaths, index) {
			let that =this
			uni.uploadFile({
				url: 'http://example.com/upload', //仅为示例，非真实的接口地址
				filePath:tempFilePaths[index] ,
				name: 'file',
				header: {
					Authorization: uni.getStorageSync('token')
				},
				formData: {
					user: 'test'
				},
				success: res => {
				//对于返回数据的处理，根据实际情况调整
					that.imgList.push(JSON.parse(res.data).data)
					console.log(res)
					let data ={img_arr:that.imgList.join('|')}
					that.updataCourseInfo(data)
				}
			})
		},
		//预览图片
		viewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		// 删除图片
		delImage(e) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
					this.imgList.splice(e.currentTarget.dataset.index, 1);
						let data = {img_arr:this.imgList.join('|')}
						this.updataCourseInfo(data)
					}
					if (this.imgList.length === 0) {
						this.showImage = false;
					}
				}
			})
		},
		// 更新新课程信息 
		updataCourseInfo(data) {
			//上传接口操作
			this.updatePageInfo()
		},
		// 更新页面
		updatePageInfo(){	
			//对获取信息接口进行操作，重新拉取数据渲染页面
		}	
	}
}
	

css

.imageBox {
	width: 630rpx;
	height: 230rpx;
	line-height: 230rpx;
	// width: 100%;
	white-space: nowrap;
	display: inline-block;
	align-items: center;
	.image_item {
		display: inline-block;
		width: 160rpx;
		height: 214rpx;
		margin-right: 19rpx;
		position: relative;
		.deletBox {
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			border: 2rpx soild #333333;
			color: #333333;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			background-color: #a0a0a0;
		}
	}
}