主系表 上传多组图片

@Override
public userDO deleteOneFile(String url, Long id) throws Exception {
        userDO  userDO= new userDO();
        userDO = userDOMapper.selectOneAndPictureById(id);
            List<Diagram> diagramList = new ArrayList<>();
            if (userDO.getAnnex() != null) {
                diagramList = userDO.getAnnex();
            }

            String fileName = FilenameUtils.getName(url);
            FilePageReqVO filePageReqVO = new FilePageReqVO();
            PageResult<FileDO> fileDOList = new PageResult<>();
            filePageReqVO = new FilePageReqVO();
            filePageReqVO.setPath(fileName);
            fileDOList = fileService.getFilePage(filePageReqVO);
            if (fileDOList.getList().size() > 0) {
                for (FileDO fileDOListList : fileDOList.getList()) {
                    fileService.deleteFile(fileDOListList.getId());
                }
            }
            
            List<Diagram> diagramListAll = new ArrayList<>();
            for (int i = 0; i < diagramList.size(); i++) {

                Diagram diagram = JSONObject.parseObject(JSON.toJSONString(diagramList.get(i)), Diagram.class);
                if (!fileName.equals(diagram.getName())) {
                    diagram.setName(diagram.getName());
                    diagram.setUrl(diagram.getUrl());
                    diagram.setRealName(diagram.getRealName());
                    diagramListAll.add(diagram);
                }
            }
            userDO.setAnnex(diagramListAll);
            userDOMapper.updateById(userDO);
            return userDO;
        }
    }

一个主表对应多个细表，现在要分别往细表中存储图片

前端：

// 接口
export function addDataAndPictures(data){
    return request.upload({
        url: MOCK + '' +
            '/api/add-pictures',
        data: data,
    });
}

<template>
<van-form ref="formData" 
    <van-cell-group  v-for="(item, index) in Data" :key="index" inset>
      <view class="top">
        <span>{{ "明细" + (index + 1) }}</span>
        <div>
            <div v-if="index > 0" style="color: black" @click="delFormLeave(index)">
                            <van-icon name="close"></van-icon>删除
            </div>
            <div style="color: #0189ce;margin-left: 10px" @click="addFormLeave">
                            <van-icon name="add-o"/>添加
            </div>
        </div>
      </div>
      <van-field
          name="姓名"
          label="姓名"
          input-align="right"
          placeholder="请输入"
          v-model="item.name"
      />
      <van-field label-align="top" required >
        <template #label>
          <div class="picture-label">
            <span>照片</span>
            <span>{{ item.picture.length + "/9" }}</span>
          </div>
        </template>
        <template #input>
          <van-uploader v-model="item.picture" multiple :max-count="9" 
                        @delete="handelDelete"/>
        </template>
      </van-field>
    </van-cell-group>

<van-button @click="submit"/>


</template>
<script setup lang="ts">
     const mainData = ref({
          mainId: "",
          data: [{
            id: "", // 细表id
            name: "",//名称、型号
            picture: [],//照片,
            fileList: [],
            fileName: []//明细图片名称多组
          }],
     }）
     const delFormLeave = (index) => {
      data.splice(index, 1); // 根据索引移除相应的元素
     };

    const handelDelete = async (file) => { // 图片删除
          if ("file" in file) {
        // 没有上传到后端的图片 直接删
          }
    };

    const submit () =（）{
        let sendData = {id: mainData.value.id};
        let formDatas = new FormData();
          sendData["list"] = mainData.value.data;
          for (let i = 0; i < mainData.value.data.length; i++) {
            let listTop = data[i];
             for (let j = 0; j < mainData.value.data[i].picture.length; j++){
              let list = mainData.value.data[i].picture[j];
              listTop.fileName = [];
          listTop.fileName.push(list.file.name);
          formDatas.append("file", list.file);
        }
      }

      formDatas.append("data", JSON.stringify(sendData));
      addDataAndPictures(formDatas).then((success) => {
        if (success.data.data) {
          // console.log("保存成功")
        }
      });

    }

</script>

 后端-mybatis:

@PostMapping("/api/add-pictures")
public CommonResult<List<DetailDO>> submit(@RequestParam(value = "file", required = false) MultipartFile[] files,@RequestParam("data") String  data) throws IOException {
        NewReqVO vo = JSONObject.parseObject(data,ReqVO.class);
        return success(service.submit(files, vo));
}

// 创建时候的类
@Data
public class CreateNewReqVO {
    @Schema(description = "主表ID")
    private Long id;

    private List<NewDetailListReqVO> list;

    @Data
    public  class NewDetailListReqVO{
        @Schema(description = "姓名")
        @NotNull(message = "姓名;唯一不能为空")
        private String itemName;
        

        @Schema(description = "上传的图片名称")
        private List<String> fileName;
        
    }
}


// 原本的DO类
@Data
public class DetailDO extends BaseDO {

    @TableId
    private Long id;

    @TableField(value = "picture", typeHandler = FastjsonTypeHandler.class)
    private List<Diagram> picture;

}

// 实现层
 List<DetailDO> submit(MultipartFile[] files, NewReqVO vo) throws IOException;

// 实现类
@Override
@Transactional(rollbackFor = Exception.class)
    public List<DetailDO> submit(MultipartFile[] files, NewReqVO vo) throws IOException {
        List<DetailDO> result = new ArrayList<>();
        DetailDO detailDO = new DetailDO();
        
        for(CreateNewReqVO.NewDetailListReqVO list : vo.getList()) {
            detailDO = new DetailDO();
            BeanUtils.copyProperties(list, detailDO);
            detailDO.setId(IdWorker.getId());
            detailDO.setHeadId(vo.getId());
            if (list.getFileName().size() > 0) {
                Diagram diagram = new Diagram();
                List<Diagram> diagramList = new ArrayList<>();
                List<MultipartFile> filesFilter = Arrays.stream(files)
                .filter(ft ->list.getFileName().contains(ft.getOriginalFilename()))
                .collect(Collectors.toList());
                for (MultipartFile fileList : filesFilter) {
                    String name = (IdWorker.getId()) +"."+     FileUtil.getSuffix(fileList.getOriginalFilename());
                    //上传图片
                    String fileUrl = fileService.createFile(fileList.getOriginalFilename(), name, IoUtil.readBytes(fileList.getInputStream()));
                    diagram = new Diagram();
                    diagram.setUrl(fileUrl);
                    diagram.setName(name);
                    diagram.setRealName(fileList.getOriginalFilename());
                    diagramList.add(diagram);
                }
                DetailDO.setPicture(diagramList);
            }
            detailDOMapper.insert(DetailDO);
            result.add(DetailDO);
        }
     
        return result;
    }
   

注：DO是List<Diagram>类型  加注解

@TableField(value = "attachment", typeHandler = FastjsonTypeHandler.class)

根据id和url删图片：