uniapp表单上传多张图片

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>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					description: ''
				},
				fileList: [],
				srcs: [],
				execId: 0,
				taskId: '',
				hasDescription: false,
				imageStyles:{
					width:64,
					height:64,
					border:{
						color:"#888888",
						width:2,
						style:'dashed',
						radius:'2px'
					}
				},
			}
		},
		onLoad(e) {
			var that = this
			that.execId = e.execId;
			that.taskId = e.taskId;
		},
		methods: {
			selectPics(){
				var that = this;
				uni.chooseImage({
					count: 3,
					success: (res) => {
						const files = res.tempFiles;
						let imgArr = [];
						for (let i = 0; i < files.length; i++) {
							let obj = new Object();
							obj.name = 'photo'+i;
							obj.uri = files[i].path;
							that.fileList.push(obj);
						}
					}
				})
			},
			close() {
			    this.show = false
			},
			cancel(){
				this.formData.description = '';
				this.fileList = [];
				this.show = false
			},
			submit() {
				// 校验必录项
				if(this.formData.description == null || this.formData.description == ''){
					this.hasDescription = true
				}else{
					this.hasDescription = false;
					if(this.fileList.length > 0){
						uni.uploadFile({
							url: '后台接口地址',
							files: this.fileList,
							header:{
								token: xxxxxxx
							},
							formData: {
								execId: this.execId,
								record: this.formData.description,
								num: this.fileList.length,
							},
							success: (res) => {
								if(res.statusCode == 200 && res.data.code == '200'){
									this.fileList = [];
									this.formData.description = '';
									uni.showToast({
										title: '提交成功'
									});
								}
							},
							fail(res){
								console.log(res)
								uni.showToast({
									title: '提交失败'
								});
							}
						})
					}else{
						let data = {
							execId: this.execId,
							record: this.formData.description
						}
						this.ajax("接口地址","POST",data,function(res){
							console.log(res)
						})
					}
				}
			},
			// 图片预览
			imgPreview(img){
				console.log(img)
				if(img.src == null || img.src == '' || img.src == undefined){
					this.srcs.push(img.uri)
				}else{
					this.srcs.push(img.src)
				}
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: this.srcs
				})
				this.srcs = []
			},
		}
	}
</script>

<style>
	.form-left{
		margin-left: 16px;
		padding:18px 0;
	}
	.form-right{
		margin-top: 6px;
		margin-left: 6px;
		padding:18px 0;
		width: 90%;
		border: 1px solid #D8D8D8;
		border-radius: 3px;
	}
	.submit-button{
		background-color: #3c9cff;
		width: 106px;
		height: 36px;
		border-radius: 16px;
		text-align: center;
		line-height: 36px;
	}
	.cancel-button{
		background-color: #D8D8D8;
		width: 106px;
		height: 36px;
		border-radius: 16px;
		text-align: center;
		line-height: 36px;
	}
	.upLoadImg{
		width: 96rpx;
		height: 96rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
		margin-left: 6px;
	}
</style>

---

后台代码（只展示接收文件逻辑）

@PostMapping("/xxx")
@Operation(summary = "添加过程A数据")
public R insertPaExecRecordA(
        @Valid InsertAForm form,
        MultipartRequest request) {
    Integer num = form.getNum();
    List<MultipartFile> files=new ArrayList<MultipartFile>();
    for (int i=0;i<num;i++){
        files.add(request.getFile("photo"+i));
    }
    if(files!=null&&files.size()>0)
    {
        for(Integer i=0;i< files.size();i++)
        {
            MultipartFile file=files.get(i);
            String fileOriName = file.getOriginalFilename().toLowerCase();
            String fileName= DateTime.now().toString("yyyyMMddhhmmss")+i+ fileOriName.substring(fileOriName.indexOf('.'));

            String path=imageFolder+"/"+fileName;
            try{
                file.transferTo(Paths.get(path));
            }
            catch(IOException e){
                log.error(e.getMessage(),e);
                throw new ZnxjException("图片保存错误");
            }
        }
    }
    int rows = 0;
    return R.ok().put("rows", rows);
}