移动端uniapp使用uview组件在表单中上传图片并回显，预览，删除操作

话不多说直接上代码，具体流程在代码中解释😎🤞

<template>
	<view class="">
		<!-- 新增任务表单内容 -->
		<view style="width:100vw; height:100vh;padding: 5px 0px;">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 --
			<uni-forms label-width="80" ref="baseForm">
				<!-- 上传图片 -->
				<view style="background-color: #FFFFFF;padding: 0rpx 20rpx;">
					<uni-forms-item label="上传图片:">
						<u-upload :fileList="fileList1" @afterRead="afterRead"    		      
						@delete="deletePic"
						 name="1" multiple 
						 :maxCount="10"
						  :previewFullImage="true"></u-upload>
					</uni-forms-item>
				</view>
				<!-- 上传图片 -->
				<view class="" style="display: flex;">
					<u-button style="width: 90%;margin-top: 15rpx;" type="primary" 
					text="提交" 
					@click="addRenWu"></u-button>
				</view>
			</uni-forms>
		</view>
</template>
<script>
import config from '@/config.js';
export default {
	data() {
		return {
			fileList1: []
			},
		};
	},
	methods: {
		
		// 删除图片
		deletePic(event) {
		//这个是uview自带的删除图片缓存路径的
			this[`fileList${event.name}`].splice(event.index, 1);
			//这个是自己删除服务器图片的接口--
			delPic(event.file.ossId).then(res => {
				// console.log(res, 'sanchu');
			});
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
			//在这里调用上传图片函数 result是下边上传图片的返回值
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				// console.log(result, 'hhhh');
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url,
						ossId: result.ossId 
						//这里的值是可以直接添加的，他会在你点击删除键的时候返
						//回
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: `${config.baseUrl}/system/oss/upload`, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						
						// 这里返回的值就是新增图片函数中-----result
						setTimeout(() => {
						//这里的Promise返回值，是可以自定义的，
						//url用来显示图片的上传服务器的地址，ossId表示唯一标识，你可以用它去删除服
						//务端图片，这个具体可以后端交流
							resolve({ url: JSON.parse(res.data).data.url, ossId: 
							JSON.parse(res.data).data.ossId });
						}, 1000);
					}
				});
			});
		},
		//提交新增信息
		addRenWu() {
			if (this.ZhiID === undefined) {
				//发送请求新增任务
				addFbTask(this.renwuInfo).then(res => {
					(this.gzUser = []),
						//提示提交成功，清空列表信息
						(this.renwuInfo = {});
					this.fileList1 = [];
					//弹窗提示提交成功
					this.$modal.msgSuccess('新增成功');
				});
			} 
		},
};
</script>

最近也开发了自己的公众号，会在上面分享前端方面的知识，有兴趣的话，走个关注吧！！！