Question

＆＃13;

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

＆＃13;

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

Answer 1

您可以按照this link获取从本地目录中进行选择时上传到firebase存储中的图像的网址。它适用于reactjs

Answer 2

如果您要上传图片并将其发布到API。然后安装<div> <ol> <% var setVar=0; var rowNo=0; function nextQuess() { console.log("inside nextQuess function"); } %> </ol> </div> <div> <button onClick="nextQuess()" id="next" >Click me!</button> </div>。它通过引发POST请求将映像保存到本地端口以及数据库中。

Answer 3

从文件中上传图片，并将其显示在页面中，以进行响应，您还可以在选择图片时使图片对象处于状态要显示在网页上，您必须使用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;

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

如何在React JS中上传图像？

4 个答案: