React Functions로 이미지 업로드 미리보기

jjlmc

안녕하세요 이미지 업로드 및 미리보기를 시도하고 있지만 클래스 구성 요소를 사용 하여이 작업을 수행하는 방법에 대한 반응 자습서 만 찾을 수 있습니다.

import React from 'react';


const AddNew = () => {
    const fileHandler = (event) => {
        console.log(event.target.files[0])
    }
    const alt = (event) => {
        return(event.target.files[0].name)
    }
    const preview = (event) => {
        return (
            URL.createObjectURL(event.target.files[0])
        )
    }
    return (
        <div className="addNew">
            <img src={preview} alt={alt}/>
            <input type="file" onChange={fileHandler} />
        </div>
    )
}

export default AddNew

이 구문을 사용하여 어떻게 미리 볼 수 있습니까?

소품 'src'및 'alt'에 대한 잘못된 값에 대한 오류가 발생합니다.

로로

상태를 사용하여 React에게 언제 다시 렌더링할지 알려 주어야합니다. useState 후크를 사용하여 구성 요소 상태 및 파일 정보를 저장할 수 있으며 변경 될 때 React는 렌더링 할 시간임을 인식합니다.

const AddNew = ({}) => {
    const [file, setFile] = React.useState(null)
    
    const fileHandler = (e) => {
        setFile(e.target.files[0])
    }
    
    return (
        <div>
            <img src={file? URL.createObjectURL(file) : null} alt={file? file.name : null}/>
            <input type="file" onChange={fileHandler} />
        </div>
    )
}



ReactDOM.render(<AddNew />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

이미지 업로드 및 미리보기 표시

분류에서Dev

이미지 업로드 [Cypress]

분류에서Dev

업로드하기 전에 이미지 미리보기 삭제

분류에서Dev

vuetify 이미지 업로드 미리보기

분류에서Dev

React 후크를 사용하여 React js에서 업로드 된 이미지 미리보기

분류에서Dev

React to Express multer에서 Antd로 잘린 이미지 업로드

분류에서Dev

React.js 입력 유형 파일로 이미지 미리보기

분류에서Dev

React에서 Laravel API로 이미지 업로드

분류에서Dev

React Frontend에서 DRF로 이미지 업로드

분류에서Dev

Firebase Cloud Storage 오류 미리보기 업로드 이미지로드 중

분류에서Dev

Vuetify-업로드 취소 후 미리보기 이미지 제거

분류에서Dev

Vuetify-업로드 취소 후 미리보기 이미지 제거

분류에서Dev

업로드하기 전에 많은 이미지 미리보기

분류에서Dev

ReactJS : 업로드 전에 여러 이미지 미리보기

분류에서Dev

업로드하기 전에 미리보기에서 이미지 선택

분류에서Dev

업로드하기 전에 이미지 미리보기 시도

분류에서Dev

미리보기 이미지 표시, 제출 양식에 업로드

분류에서Dev

Ubuntu 14.04 이미지 미리보기가로드되지 않음

분류에서Dev

둘 이상의 이미지에 대해 업로드하기 전에 미리보기 이미지

분류에서Dev

NicEditor 이미지 업로드

분류에서Dev

업로드하기 전에 이미지를 미리 보시겠습니까?

분류에서Dev

여러 이미지 업로드 및 미리보기

분류에서Dev

이미지를 미리보고 업로드하기 전에 자릅니다.

분류에서Dev

Laravel : 이미지 업로드

분류에서Dev

미리보기가있는 다중 이미지 업 로더

분류에서Dev

미리보기가있는 다중 이미지 업 로더

분류에서Dev

Android 앱에 업로드 된 동영상의 흰색 미리보기 이미지

분류에서Dev

종이 클립으로 jQuery 파일 업로드, 업로드 전 미리보기 이미지 표시

분류에서Dev

업로드 스크립트 전 jQuery 이미지 미리보기

Related 관련 기사

  1. 1

    이미지 업로드 및 미리보기 표시

  2. 2

    이미지 업로드 [Cypress]

  3. 3

    업로드하기 전에 이미지 미리보기 삭제

  4. 4

    vuetify 이미지 업로드 미리보기

  5. 5

    React 후크를 사용하여 React js에서 업로드 된 이미지 미리보기

  6. 6

    React to Express multer에서 Antd로 잘린 이미지 업로드

  7. 7

    React.js 입력 유형 파일로 이미지 미리보기

  8. 8

    React에서 Laravel API로 이미지 업로드

  9. 9

    React Frontend에서 DRF로 이미지 업로드

  10. 10

    Firebase Cloud Storage 오류 미리보기 업로드 이미지로드 중

  11. 11

    Vuetify-업로드 취소 후 미리보기 이미지 제거

  12. 12

    Vuetify-업로드 취소 후 미리보기 이미지 제거

  13. 13

    업로드하기 전에 많은 이미지 미리보기

  14. 14

    ReactJS : 업로드 전에 여러 이미지 미리보기

  15. 15

    업로드하기 전에 미리보기에서 이미지 선택

  16. 16

    업로드하기 전에 이미지 미리보기 시도

  17. 17

    미리보기 이미지 표시, 제출 양식에 업로드

  18. 18

    Ubuntu 14.04 이미지 미리보기가로드되지 않음

  19. 19

    둘 이상의 이미지에 대해 업로드하기 전에 미리보기 이미지

  20. 20

    NicEditor 이미지 업로드

  21. 21

    업로드하기 전에 이미지를 미리 보시겠습니까?

  22. 22

    여러 이미지 업로드 및 미리보기

  23. 23

    이미지를 미리보고 업로드하기 전에 자릅니다.

  24. 24

    Laravel : 이미지 업로드

  25. 25

    미리보기가있는 다중 이미지 업 로더

  26. 26

    미리보기가있는 다중 이미지 업 로더

  27. 27

    Android 앱에 업로드 된 동영상의 흰색 미리보기 이미지

  28. 28

    종이 클립으로 jQuery 파일 업로드, 업로드 전 미리보기 이미지 표시

  29. 29

    업로드 스크립트 전 jQuery 이미지 미리보기

뜨겁다태그

보관