如何在 React JS 中上传图片？答案

【问题标题】：How to upload an image in React JS?如何在 React JS 中上传图片？
【发布时间】：2017-09-27 07:07:31
【问题描述】：

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

这是我提供的 sn-p，用于在 react js 中从设备中选择文件，使用它我可以选择文件并且该文件名也显示出来我现在想要的是将此文件存储在 S3 或任何地方并从那里获取其 URL 并使用 fetch api 调用将其发布到我的服务器。

【问题讨论】：

标签： reactjs

【解决方案1】：

从您的文件中上传图像并将其显示在您的页面上以做出反应，也可以获取我们选择图片时状态下的图片对象要在网页上显示，您必须使用 URL.createObjectURL(fileObject) 将图像对象转换为对象

import React, { Component } from "react";

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

    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;

【讨论】：

如果你有箭头函数就不需要this.onImageChange = this.onImageChange.bind(this);
使用 react hook 的检查链接检查更新的代码 ==> stackoverflow.com/a/68979570/8621764

【解决方案2】：

使用 React Hook 的上传和显示图片

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;

【讨论】：

这在我的 nextjs 站点中运行良好，我可以无缝插入它而无需担心类或 render()，非常感谢，愿你的所有程序在第一次运行时编译

【解决方案3】：

如果您想上传图片并将其发布到 API。然后你安装react-image-uploader。它通过发出 POST 请求将图像保存到您的本地端口和数据库中。

【讨论】：

【解决方案4】：

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

【讨论】：