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);
}