uniapp表单上传多张图片

最新推荐文章于 2025-10-13 09:39:07 发布

原创

最新推荐文章于 2025-10-13 09:39:07 发布 · 3.6k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue

本文展示了如何在uniapp中实现表单结合多图片上传的功能。前端使用了uni-popup组件创建弹窗表单，通过uni.chooseImage选择图片并上传，利用uni.uploadFile将图片和表单数据发送到后台。后台通过MultipartRequest接收并保存图片。注意，小程序仅支持单张图片上传。

uniapp实现表单内多图片上传

注意事项：只有app支持多图片上传，小程序只能一张一张传
需求描述：表单数据和选择的多张照片同时提交，效果如下所示：
在这里插入图片描述

话不多说，上代码，前端代码：

<template>
	<view>
			<u-popup :show="show" @close="close">
				<view style="display: flex;">
					<view class="form-left">
						问题描述
					</view>
					<view class="form-right">
						<textarea auto-height="true" v-model="formData.description" :cursor-spacing="150"></textarea>
					</view>
				</view>
				<view v-show="hasDescription" style="margin-left: 60px;">
					<text style="color: #FF3333;font-size: small;">请录入问题描述</text>
				</view>
				<view style="display: flex;">
					<view class="form-left">
						照片
					</view>
					<view style="margin-left: 6px;">
						<view style="display: flex;">
							<view v-for="(pic,index) in fileList" :key="index">
								<image :src="pic.uri" @click="imgPreview(pic)" class="upLoadImg"></image>
							</view>
							<image v-if="fileList.length < 3" src="../../static/icon/task/upload-pic.png" style="width: 36px;height: 36px;margin: 13px 16px;" @click="selectPics">
								
							</image>
						</view>
					</view>
				</view>
				<view style="padding: 20rpx; display: flex;justify-content: space-around;">
					<view  class="submit-button" @click="submit()">
						提交
					</view>
					<view class="cancel-button" @click="cancel">
						取消
					</view>
				</view>
			</u-popup>
		<

最低0.47元/天解锁文章