리액트 JS에서 이미지를 업로드하는 방법

리액트 JS에서 이미지를 업로드하는 방법

<div className="mb-1">
     Image <span className="font-css top">*</span>
     <div className="">
         <input type="file" id="file-input" name="ImageStyle"/>
     </div>
</div>

이것은 리액트 js에서 디바이스에서 파일을 선택하기 위해 사용한 스니펫입니다.이것을 사용하면 파일을 선택할 수 있고, 그 파일명도 표시됩니다.지금 제가 원하는 것은 이 파일을 S3 또는 다른 곳에 저장하고 거기서 URL을 가져와 fetch api 호출을 사용하여 서버에 게시하는 것입니다.

리액트 후크 이미지 업로드 및 표시

import React, { useState } from "react";

const UploadAndDisplayImage = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
    <div>
      <h1>Upload and Display Image usign React Hook's</h1>
      {selectedImage && (
        <div>
        <img alt="not fount" width={"250px"} src={URL.createObjectURL(selectedImage)} />
        <br />
        <button onClick={()=>setSelectedImage(null)}>Remove</button>
        </div>
      )}
      <br />
     
      <br /> 
      <input
        type="file"
        name="myImage"
        onChange={(event) => {
          console.log(event.target.files[0]);
          setSelectedImage(event.target.files[0]);
        }}
      />
    </div>
  );
};

export default UploadAndDisplayImage;

이미지를 파일에서 업로드하여 페이지에 반응하여 표시합니다.또한 URL.createObjectURL(fileObject)을 사용하여 이미지 개체를 개체로 변환해야 하는 웹 페이지에 표시할 이미지를 선택할 때 이미지 개체를 얻을 수 있습니다.

import React, { Component } from "react";

class DisplayImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: null
    };

   // if we are using arrow function binding is not required
   //  this.onImageChange = this.onImageChange.bind(this);
  }

  onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0];
      this.setState({
        image: URL.createObjectURL(img)
      });
    }
  };

  render() {
    return (
      <div>
        <div>
          <div>
            <img src={this.state.image} />
            <h1>Select Image</h1>
            <input type="file" name="myImage" onChange={this.onImageChange} />
          </div>
        </div>
      </div>
    );
  }
}
export default DisplayImage;

이미지를 업로드하여 API에 게시하고 싶은 경우.다음에, 인스톨 합니다.react-image-uploaderPOST 요청을 발행하여 이미지를 로컬포트와 데이터베이스에 저장합니다.

이 코드를 사용하면 이미지를 서버에 업로드 할 수 있습니다.백엔드 코드는 다음과 같습니다.nestjs업로드할 이미지를 표시합니다.사용하였습니다.formdata.

import React, { useEffect, useState } from "react";
function Product() {

    const { REACT_APP_REST } = process.env;

    const [file, setFile] = useState([]);

    const handleFile = event => {
        setFile(
            URL.createObjectURL(event.target.files[0])
        );
        const formData = new FormData();
        formData.append("fileupload", event.target.files[0]);

        fetch(REACT_APP_REST + "/product/upload", {
            method: 'POST',

            body: formData,
            dataType: "jsonp"
        })
    };
    return (
        <>
            <Container fluid>
                <Col md="4">
                    <Card className="card-user">
                        <img src={file} />
                        <Card.Body>
                            <Form.Group>
                                <label>IMAGE</label>
                                <Form.Control
                                    type="file"
                                    required="required"
                                    onChange={handleFile}
                                ></Form.Control>
                            </Form.Group>
                        </Card.Body>
                        <hr></hr>

                    </Card>
                </Col>
            </Container>
        </>
    );
}

export default Product;

리액트 리액트 리액트 리액트 리액트 리액트 리액트 리액트를 사용하면

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

const filterBySize = (file) => {
  //filter out images larger than 5MB
  return file.size <= 5242880;
};

const App = () => (
  <Uploady
    destination={{ url: "my-server.com/upload" }}
    fileFilter={filterBySize}
    accept="image/*"
  >
    <UploadButton />
    <UploadPreview />   
  </Uploady>
);

'create Object'를 실행하지 못했습니다.'URL'의 URL' : 오버로드 해결에 실패했습니다.

어떤 이유로 URL.createObject를 사용할 수 없습니다.URL(이미지)을 로서

  const [image, setImage] = useState(null);
  const [imgURL, setImgURL] = useState();

<img src={URL.createObjectURL(image)}/>

그래서 Url을 버튼 클릭 방식으로 즉시 표시할 수 있는 상태로 저장합니다.됐다!

setImgURL(URL.createObjectURL(image)); 

유감스럽게도 use Effect를 사용해도 같은 에러가 발생하였습니다.

  useEffect(() => {
    setImgURL(URL.createObjectURL(image));
  }, [image]);

언급URL : https://stackoverflow.com/questions/43692479/how-to-upload-an-image-in-react-js