이미지 업로드 관련해서 질문드립니다. onchange 여러번쓰기?

[김건]

const [file, setFile] = useState();
  const [fileName, setFileName] = useState("");

  const saveFile = (e) => {
    setFile(e.target.files[0]);
    setFileName(e.target.files[0].name);
  };

  const uploadFile = async (e) => {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("fileName", fileName);
    try {
      const res = await axios.post(
        "http://localhost:3002/upload", formData
      );
      console.log(res);
    } catch (ex) {
      console.log(ex);
    }
  };

 

const handleCapture = (target) => {
        if (target.files) {
        if (target.files.length !== 0) {
            const file = target.files[0];
            const newUrl = URL.createObjectURL(file);
            setSource(newUrl);
        }
        }
    };

 

<hr />

<div className="upload">
            <input
              accept="image/*;capture=camera"
              className={classes.input}
              id="icon-button-file camera"
              type="file"
              // capture="user"
              onChange={(e) => handleCapture(e.target)                
              }
              //  onChange={saveFile}"
            />
            <button onClick={uploadFile}>Upload</button>
          </div>

 

이미지 업로드 및 미리보기를 만들고 있습니다. onChange를 두 번 쓰는 방법이 있을까요??

밑에 코드는 각 각쓸때 원하는 기능이 발휘되는데 동시에는 못쓰겠습니다 ㅠㅠ

handlecapture 는 미리보기이고,  saveFile은 업로드전 저장입니다.;

         onChange={(e) => handleCapture(e.target)                
              }
              //  onChange={saveFile}"

 

 

 

[codingapple]

onChange={(e) => {

  handleCapture(e.target);

  saveFile(e어쩌구);

}

}

이렇게 쓰면 안될까요 

[김건]

함수합치기는 Cannot read property 'files' of undefined  이런 오류뜨면서  실패해서 다른 방법 찾았었는데 ㅜㅜ 

다시 시도해보겠습니다.  

[codingapple]

그 에러는

두개의 함수 둘 중 하나에 e.target이 제대로 전달이 잘 안되었기 때문인듯요

[글쓴이]

글