如何在React JS中上传图片？

Question

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

以下是我在React JS中提供的用于从设备中选择文件的代码片段，使用它可以选择文件并显示其文件名， 现在我想将此文件存储在S3或任何其他地方，并从那里获取其URL，然后使用fetch API调用将其POST到我的服务器。

- Piyush

Answer 1

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 found"
            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;

- ABHIJEET KHIRE

---

这在我的Next.js网站中非常有效，并且我可以无缝插入它，而不需要担心类或render()函数。非常感谢你，希望你的所有程序第一次运行就能编译成功。 - Ryan Millares

干得好，但是在去掉图片后，它在我的端上停止工作了。 - Jerry Joseph

在删除图像后使其工作，您还需要清除文件输入。 - Jay F.

Answer 2

从文件中上传图像并在React页面上显示，当我们选择要显示在网页上的图像时，您还可以在状态中获取图像对象。要将图像对象转换为URL对象以显示在网页上，请使用 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;

- ABHIJEET KHIRE

---

如果你使用箭头函数，就不需要 this.onImageChange = this.onImageChange.bind(this);。 - Aviral

使用React Hook检查更新后的代码，请查看链接： ==> https://dev59.com/MVcP5IYBdhLWcg3w39w-#68979570 - ABHIJEET KHIRE

Answer 3

如果你想上传图片并将其发布到API，那么你需要安装 react-image-uploader。它通过发起POST请求将图片保存到本地端口和数据库中。

- Thananjaya S

Answer 4

这段代码可以让您将图片上传到服务器，后端代码是使用 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;

- L3xpert

Answer 5

在URL上执行'createObjectURL'时失败：超载分辨率失败。

由于某些原因，无法像这样使用URL.createObjectURL(image)

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

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

因此，我将URL保存在状态中，以便在按钮单击方法中进行快速显示。 这很有效！

setImgURL(URL.createObjectURL(image)); 

不幸的是，当我使用 useEffect 时仍然遇到相同的错误。

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

- Utku AKTAS

Answer 6

使用react-uploady，您可以轻松完成此操作：

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>
);

- poeticGeek