이미지 관련 질문입니다.

[피세찬]

혹시 input을 두개를 써서 이미지를 업로드 하는 방법이 있을까요?
여러번 시도 해봤는데 계속 실패만 하네요...

'use client';

import { useState } from 'react';

export default function Body() {
    const [resimag, setResImg] = useState({});
    const [imagefile, setImagefile] = useState({});
    const [imgSrc, setImgSrc] = useState();
    async function submit(e) {
        e.preventDefault();
        //S3 업로드

        let file = imagefile;

        const formData = new FormData();
        Object.entries({ ...resimag.fields, file }).forEach(([key, value]) => {
            formData.append(key, value);
        });
        console.log(formData);
        let result = await fetch(resimag.url, {
            method: 'POST',
            body: formData,
        });
    }
    return (
        <div>
            <form onSubmit={submit}>
                <div>
                    <lable>Side</lable>

                    <input
                        type="file"
                        name="side"
                        accept="image/*"
                        onChange={async (e) => {
                            let file = e.target.files[0];
                            setImagefile(file);
                            let image = window.URL.createObjectURL(file);
                            setImgSrc(image);
                            console.log(image);
                            let filename = encodeURIComponent(file.name);
                            let res = await fetch('/api/post/image?file=' + filename);
                            res = await res.json();
                            setResImg(res);
                        }}
                    />
                </div>

                <button>입력</button>
            </form>
            < img src={imgSrc}></img>
        </div>
    );
}

[codingapple]

<input> 똑같이 복붙하나해서 거기서부터 시작해봅시다 
이미지 src 저장해둘 state도 2개가 필요하겠군요

[피세찬]

이렇게 하니까 첫번째 input만 됩니다...

POST https://s3.ap-northeast-2.amazonaws.com/버킷이름 400 (Bad Request) 이런 에러가 콘솔창에 뜹니다.

"use client";

import { useState } from "react";
export default function Body() {
  const [resimag, setResImg] = useState({});
  const [imagefile, setImagefile] = useState({});
  const [imgSrc, setImgSrc] = useState();

  const [resimag2, setResImg2] = useState({});
  const [imagefile2, setImagefile2] = useState({});
  const [imgSrc2, setImgSrc2] = useState();

  async function submit(e) {
    e.preventDefault();
    //S3 업로드
    let file = imagefile;
    const formData = new FormData();
    Object.entries({ ...resimag.fields, file }).forEach(([key, value]) => {
      formData.append(key, value);
    });
    let result = await fetch(resimag.url, {
      method: "POST",
      body: formData,
    });

    let file2 = imagefile2;
    const formData2 = new FormData();
    Object.entries({ ...resimag2.fields, file2 }).forEach(([key, value]) => {
      formData2.append(key, value);
    });
    let result2 = await fetch(resimag2.url, {
      method: "POST",
      body: formData2,
    });
  }
  return (
    <div>
      <form onSubmit={submit}>
        <div>
          <lable>front</lable>
          <input
            type="file"
            name="front"
            accept="image/*"
            onChange={async (e) => {
              let file = e.target.files[0];
              setImagefile(file);
              let image = window.URL.createObjectURL(file);
              setImgSrc(image);
              console.log(image);
              let filename = encodeURIComponent(file.name);
              let res = await fetch("/api/post/image?file=" + filename);
              res = await res.json();
              setResImg(res);
            }}
          />
          <lable>Side</lable>
          <input
            type="file"
            name="side"
            accept="image/*"
            onChange={async (e) => {
              let file = e.target.files[0];
              setImagefile2(file);
              let image = window.URL.createObjectURL(file);
              setImgSrc2(image);
              console.log(image);
              let filename = encodeURIComponent(file.name);
              let res = await fetch("/api/post/image?file=" + filename);
              res = await res.json();
              setResImg2(res);
            }}
          />
        </div>
        <button>입력</button>
      </form>
      < img src={imgSrc}></img>
      < img src={imgSrc2}></img>
    </div>
  );
}

[피세찬]

let file = imagefile;
    const formData = new FormData();
    Object.entries({ ...resimag.fields, file }).forEach(([key, value]) => {
      formData.append(key, value);
    });
    let result = await fetch(resimag.url, {
      method: "POST",
      body: formData,
    });

    file = imagefile2;
    const formData2 = new FormData();
    Object.entries({ ...resimag2.fields, file }).forEach(([key, value]) => {
      formData2.append(key, value);
    });
    let result2 = await fetch(resimag2.url, {
      method: "POST",
      body: formData2,
    });

해결했습니다. file의 이름을 file2로 변경하면 안되는 군요

[글쓴이]

글