[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기

 

 

 

 

 

파일(이미지), 제목, 내용을 입력하고 DB에 저장하는 페이지가 있다고 하자 

formdata에 "file", "data"에 각각 파일과 제목, 내용 데이터를 담아서 보내려고 한다

 

FormData 객체는 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공한다

이를 이용하면 데이터를 multipart/form-data 형식으로 전송할 수 있다

 

 

Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다

file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다

 

let blob = new Blob(array, options)

 

 

 

 

 

 

① CreateList.js

 

import React, { useState } from "react"
import { Button } from "antd"
import Axios from "axios"
import UploadImage from "./Sections/UploadImage"

const CreateList = () => {
  const [files, setFiles] = useState([])

  const user = useSelector(state => state.user)
  const history = useHistory()

  const onCreate = () => {
    let formData = new FormData()

    formData.append("file", files[0])

    let variables = [{
      title: "title",
      content: "content"
    }]

    formData.append("data", new Blob([JSON.stringify(variables)], {type: "application/json"}))
    
    Axios.post("/create/list", formData)
  }
  
  const onDrop = (files) => {
    setFiles(files)
  }

  return (
    <div>
      <UploadImage onDrop={onDrop} />
      <Button size="large" onClick={onCreate}>생성하기</Button>
    </div>
  )
}
export default CreateList

 

 

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/API/Blob

Blob - Web API | MDN