[WIL]ミニプロジェクト(FormDataを使用して画像urlを他のコンテンツとともにサーバに送信with.AXIOS)

FormDataを使用して画像urlを他のコンテンツとともにサーバに送信

//POSTWRITE.js

const [imageUrl, setImageUrl] = React.useState(""); //보내는 image
  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");
  const [category, setCategory] = React.useState("");
  const [price, setPrice] = React.useState(0);


const changeContent = (e) => {
    setContent(e.target.value);
  } 
  const changePrice = (e) => {
    setPrice(e.target.value);
  } 
  const changeTitle = (e) => {
    setTitle (e.target.value);
  }
  const changeCategory = (e) => {
    setCategory(e.target.value); 
  }
  const changeImageUrl = (e) => {
    setImageUrl(e.target.files[0]);
  }

  const submit = () => {
    if(imageUrl === "" || title === "" || category === "" || content === ""  || price === "" ){
      alert('모든 사항을 기입해주세요.');
      return;
    }else{
      dispatch(PostActions.addPost(imageUrl, title, category, content, price));
    }
    
    
    <input type="text" id="title" name="title" placeholder="글 제목" onChange={changeTitle}/> ... 
    <input id="image" name="image" type="file" 
              onChange={(e) => {changeImageUrl(e);}}/>
    <input id="price" name="price" className="has-prefix" type="number" placeholder="가격 (선택사항)" 
                onChange={changePrice}/> 

//post.js (redux store)
const addPost = (imageUrl, title, category, content, price) => {
    const formData = new FormData();
      formData.append("title", title);
      formData.append("category", category);
      formData.append("content", content);
      formData.append("price", price);
      formData.append("image", imageUrl);
  return async function (dispatch, getState, {history}){
      try{
          await axios.post("http://----server url ----/api/write", formData, {
            headers: {
              Authorization: `BEARER ${sessionStorage.getItem("token")}`
            },
          },
          { withCredentials: true } // cors Error 방지
          );
          window.alert('게시글 작성을 성공하였습니다.');
          history.replace('/');
      }
      catch(err){
        window.alert('게시글 작성에 실패하였습니다.')
        console.log(err);
        return;
      }
  }
}