React "react-hook-form"의 useFieldArray를 이용해서 동적으로 spring에 파일 업로드하기

Question

리액트에서 react-hook-form의 useFieldArray를 이용해서 이미지를 업로드 해야합니다.useFieldArray를 써야하는이유는 동적으로 사용자가 버튼 클릭시 입력 input들을 생성해야하기 때문입니다. export async function updateConfImage(formData) { return axios.post(baseUrl+`/conference/image-upload`, formData, { headers: { "Content-Type": `multipart/form-data`, }, }); } ------------------------ import React from "react"; import { useForm, useFieldArray } from "react-hook-form"; import {printFormData} from "../utils/Functions"; import {updateConfImage} from "../api/etc"; import Swal from "sweetalert2"; export default function ImagesUploadTest() { const { register, control, handleSubmit, reset, trigger, setError } = useForm({ }); const { fields, append, remove } = useFieldArray({ control, name: "test" }); const onSubmit = (data) => { updateConfImage(data) .then(result => { Swal.fire({ icon: result.data.message, text: result.data.content, confirmButtonText: 'OK' }).then((result) => { console.log("success") }); }) .catch(result=> { Swal.fire({ icon: 'error', text: result.response ? result.response.data.content : "현재 서버에 문제가 있습니다. 관리자에게 문의해주세요." }) }) .finally(() => { }) } return ( ); }위는 리액트 소스이며 아래는 spring 컨트룰러에서 이미지값과 데이터를 가져오는 방식입니다. @PostMapping(value ="/conference/image-upload") public ResponseEntity confFileUpload( MultipartHttpServletRequest req // @RequestBody List files, // @RequestParam HashMap data, // @RequestParam(value="files", required=false) MultipartFile[] files // @RequestParam(value="imgFile", required=false) MultipartFile[] files, // MultipartFile[] files ){ return null; // return service.confFileUpload(files); }어떤 방식을 써도 file이 null입니다...고수님들 도와주십쇼..

jhg097 · Answer

spring은 springboot3이고 따로 설정한것은 없습니다

Ask_Answer · Answer

data 부분 어떻게 찍히나요? request를 spring에서 받았을 때 아예 들어오는 게 없으면 보내는 게 없다는 의미 같은데...

React "react-hook-form"의 useFieldArray를 이용해서 동적으로 spring에 파일 업로드하기

2개의 답변

기술 목록