Applet/pages/activity/uploadFiel.vue

<template>
	<view class="container">
		<view class="uploadBox">
			<view class="uploadItem upload" v-for="item in form" :key="item">
				<image :src="item" class="uploadImg"></image>
				<image src="../../static/cw2.png" class="imgx" @click="imgx({ url: item })"></image>
			</view>
			<view class="upload" @click="upload('retrofit_over')" v-if="form.length < 4">
				<image src="../../static/xj.png" class="xiangji"></image>
			</view>
		</view>
		<button class="submit" type="primary" @click="submit">提交</button>
	</view>
</template>

<script>
	import request from '../../api/activity.js';
	import { BASE_URL } from '../../env.js';
	const token = uni.getStorageSync('token');
	export default {
		onLoad: function (option) {
			this.activityId = option.activityId;
		},
		data() {
			return {
				activityId: '',
				form: []
			}
		},
		async mounted() {
			const res = await request.getPhotos({ activityId: this.activityId });
			if (res.errcode) {
				wx.showToast({
					title: res.details,
					icon: 'error'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
				return;
			}
			const photos = res.data.photos?.map(e => e.photo);
			if (photos) this.form = photos;
		},
		methods: {
			async submit() {
				if (this.form.length <= 0) {
					wx.showToast({
						title: '请选择图片',
						icon: 'error'
					})
					return;
				};
				const res = await request.uploadImgs({ activityId: this.activityId, photos: this.form });
				if (res.code == 200) {
					wx.showToast({
						title: '提交成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
				
			},
			// 文件上传
			upload() {
				const token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					success: async (chooseImageRes) => {
						wx.showLoading({
							title: '上传中'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: BASE_URL.url + '/activity/photo',
							name: 'file',
							header: {
								'Authorization': `Bearer ${token}`
							},
							filePath: tempFilePaths[0],
							success: (uploadFileRes) => {
								const obj = JSON.parse(uploadFileRes.data);
								this.form.push(BASE_URL.fileUrl + obj.imgUrl);
							},
							fail(e) {
								console.log(e)
								wx.showToast({
									title: '上传失败'
								})
							},
							complete() {
								wx.hideLoading();
							}
						});
					}
				});
			},
			// 取消图片上传
			imgx({ url }) {
				this.form = this.form.filter(e => e !== url);
			},
		}
	}
</script>

<style>
	.upload {
		width: 75px;
		height: 75px;
		border-radius: 12px;
		border: 1px solid #999;
		margin: 10px 0;
		margin-right: 5px;
		background: #dadada;
	}
	.xiangji {
		display: block;
		width: 40px;
		height: 40px;
		margin: 25px auto;
	}
	.uploadItem {
		display: flex;
		position: relative;
	}
	.uploadImg {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 12px;
		overflow: hidden;
	}
	.uploadBox {
		display: flex;
		width: 90%;
		margin: 5px auto;
		flex-wrap: wrap;
	}
	.imgx {
		width: 15px;
		height: 15px;
		position: absolute;
		top: -5px;
		right: -5px;
	}
	.submit {
		width: 90%;
		margin: 25px auto;
	}
</style>