React_이미지 파일 업로드하기

 

 

📌 문제 

 

이미지 파일을 선택하고, 미리보기를 해주는 페이지를 구현하고 싶었다.

inputBox 컴포넌트를 만들어서 이미지 파일을 선택하는 것 까지는 성공했지만,

미리보기로 페이지가 뜨지 않았다.

 

 

 

 

📌 시도한 방법

 

import React, { useState } from 'react';
import Layout from '../components/common/Layout';
import { styled } from 'styled-components';
import Text from '../components/common/Text';
import Button from '../components/common/Button';
import InputBox from '../components/common/InputBox';
import useInput from '../hooks/useInput';
import { useMutation } from 'react-query';
import { uploadPost } from '../api/posts';

function Upload() {
  // 텍스트 관리
  const [title, titleHandler] = useInput();
  const [price, priceHandler] = useInput();
  const [content, contentHandler] = useInput();
  const [location, locationHandler] = useInput();

  // 파일 관리
  const [photo, setPhoto] = useState(null);

  //이미지 파일 관리
  const [previewUrl, setPreviewUrl] = useState(null);

  const photoChange = (e) => {
    const file = e.target.files;
    setPhoto(file);
    setPreviewUrl(URL.createObjectURL(file));
  }

  const uploadMutation = useMutation(uploadPost, {
    onSuccess: () => {
      alert('업로드에 성공하셨습니다.')
    }
  })

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('photo', photo);
    formData.append('title', title);
    formData.append('price', price);
    formData.append('content', content);
    formData.append('location', location);

    uploadMutation.mutate(formData);
  }

  return (
    <Layout>
      <PostTitle>중고 물품 올리기</PostTitle>
      <Container>
        <CardPhoto>
          {previewUrl && <img src={previewUrl} alt="Preview" style={{ maxWidth: '100%', maxHeight: '100%' }} />}
          <InputBox type={'file'} onChange={photoChange} accept={'image/*'} />
          <label></label>
        </CardPhoto>
        <form onSubmit={handleSubmit}>
          <UploadTitle>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              글 제목
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={title}
              onChange={titleHandler} />
          </UploadTitle>
          <UploadPrice>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              가격
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={price}
              onChange={priceHandler} />
          </UploadPrice>
          <UploadContent>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              물품 설명
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={content}
              onChange={contentHandler} />
          </UploadContent>
          <UploadLocation>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              거주지
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={location}
              onChange={locationHandler} />
          </UploadLocation>
          <div style={{ width: '40%', margin: 'auto' }}>
            <Button width={'100%'} height={'45px'} bc={'#9e7979'} onClick={handleSubmit}>
              <Text fontSize={'22px'} fontWeight={'bold'} color={'#ffffff'}>
                게시물 올리기
              </Text>
            </Button>
          </div>
        </form>
      </Container>
    </Layout>
  );
}

previewUrl이라는 새로운 상태를 추가했다.

photoChange 함수에서 이미지가 변경될 때마다 URL.createObjectURL(file)을 사용하여 미리보기 URL을 생성하고, previewUrl 상태에 설정한다. 그 다음, previewUrl이 존재할 때에만 <img> 요소가 렌더링되도록 설정하여 이미지를 표시한다.

 

 

 

그러나, 오류발생 .. !!

미해결. 에러코드

 

📌 원인

 

createObjectURL 함수는 브라우저의 파일 객체를 URL로 변환하는 데 사용된다.

그러나 최신 버전의 Chrome 및 Firefox에서는 이 함수의 사용이 제한되었다...?? 

대신에, 이미지 미리보기를 위해 파일을 업로드한 후에는 FileReader 객체를 사용하여 파일을 읽고, 데이터 URL을 생성할 수 있다.

 

 

 

📌 해결 방법

 

import React, { useState } from 'react';
import Layout from '../components/common/Layout';
import { styled } from 'styled-components';
import Text from '../components/common/Text';
import Button from '../components/common/Button';
import InputBox from '../components/common/InputBox';
import useInput from '../hooks/useInput';
import { useMutation } from 'react-query';
import { uploadPost } from '../api/posts';

function Upload() {
  // 텍스트 관리
  const [title, titleHandler] = useInput();
  const [price, priceHandler] = useInput();
  const [content, contentHandler] = useInput();
  const [location, locationHandler] = useInput();

  // 파일 관리
  const [photo, setPhoto] = useState(null);

  //이미지 파일 관리
  const [previewUrl, setPreviewUrl] = useState(null);

  const photoChange = (e) => {
    const file = e.target.files[0];
    setPhoto(file);

    const reader = new FileReader();
    reader.onload=() => {
      setPreviewUrl(reader.result);
    };
    reader.readAsDataURL(file);
  };

  const uploadMutation = useMutation(uploadPost, {
    onSuccess: () => {
      alert('업로드에 성공하셨습니다.')
    }
  })

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('photo', photo);
    formData.append('title', title);
    formData.append('price', price);
    formData.append('content', content);
    formData.append('location', location);

    uploadMutation.mutate(formData);
  }

  return (
    <Layout>
      <PostTitle>중고 물품 올리기</PostTitle>
      <Container>
        <CardPhoto>
          {previewUrl && <img src={previewUrl} alt="Preview" style={{ maxWidth: '100%', maxHeight: '100%' }} />}
          <InputBox type={'file'} onChange={photoChange} accept={'image/*'} />
        </CardPhoto>
        <form onSubmit={handleSubmit}>
          <UploadTitle>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              글 제목
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={title}
              onChange={titleHandler} />
          </UploadTitle>
          <UploadPrice>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              가격
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={price}
              onChange={priceHandler} />
          </UploadPrice>
          <UploadContent>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              물품 설명
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={content}
              onChange={contentHandler} />
          </UploadContent>
          <UploadLocation>
            <Text fontSize={'25px'} fontWeight={'bold'} color={'#9e7979'}>
              거주지
            </Text>
            <InputBox width={'270px'} height={'28px'} shadow={'1px 1px 3px 1px #9e7979'}
              value={location}
              onChange={locationHandler} />
          </UploadLocation>
          <div style={{ width: '40%', margin: 'auto' }}>
            <Button width={'100%'} height={'45px'} bc={'#9e7979'} onClick={handleSubmit}>
              <Text fontSize={'22px'} fontWeight={'bold'} color={'#ffffff'}>
                게시물 올리기
              </Text>
            </Button>
          </div>
        </form>
      </Container>
    </Layout>
  );
}

export default Upload;