Question

我想在主页上上传图片。
我做了“来自本地的文件选择处理程序”。
当我按下“上传”按钮时，我想在html上显示图像。
如何制作uploadHandler？

import React, { Component } from 'react';    

class Upload extends Component {

    state = {selectedFile: null}

    _fileChangedHandler = (event) => {
        this.setState({selectedFile: event.target.files[0]})
    }

    _uploadHandler = () => {

    }

    render() {
        return (
            <div className="Upload">

                <input type="file" onChange={this._fileChangedHandler} />
                <button onClick={this._uploadHandler}>Upload!</button>

            </div>
        );
    }
}

export default Upload;

Answer 1

您可以在上传之前显示图像作为预览，例如：

state = {selectedFile: null}

_fileChangedHandler = (event) => {

    let file = event.target.files[0];

    if (file && window.FileReader) {
        const reader = new FileReader();

        reader.onload = (e) => {
            this.setState({
                    selectedFile: file,
                    selectedFileSrc: e.target.result
                }
            )
        };

        reader.readAsDataURL(file);
    }
}

_uploadHandler = () => {
    this.setState({submited: true})
}

render() {
    return (
        <div className="Upload">
            { this.state.submited ? <img src={this.state.selectedFileSrc} /> : null}
            <input type="file" onChange={this._fileChangedHandler} />
            <button onClick={this._uploadHandler}>Upload!</button>

        </div>
    );
}

Answer 2

这完全取决于您的主页或服务器提供的接口/ API。

您可能想发送一个包含图像的HTTP POST。

这看起来像这样

_uploadHandler = async () => {

  if (this.state.selectedFile !== null) {
    const response = await fetch("http://yourFancyHomepageLocation/upload_image", {
      "method": "POST",
      "headers": {
        "Content-Type": "application/json"
      },
      "body": this.state.selectedFile
    });

    if (response.status === 200){
      console.log("Everything went fine");
    }
    else {
      console.log("Something went wrong");
    }
  }
  else {
    console.log("You have to select a file before upload");
  }

Answer 3

import React, { Component } from 'react';    

class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        file: '',
        uploadImageUrl: ''
    };
  }

_fileChangedHandler = (e) => {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
    this.setState({
        file,
        uploadImageUrl: reader.result
    });
    }
    reader.readAsDataURL(file)
}

_uploadHandler = () => {
    this.setState({
        uploadImage: !!this.state.uploadImageUrl
    })
console.log('upload image api call', this.state.file)
}

render() {
    return (
        <div className="Upload">
            <input type="file" onChange={this._fileChangedHandler} />
            <button onClick={this._uploadHandler}>Upload!</button>
            {this.state.uploadImage ? <img src={this.state.uploadImageUrl} /> : ''}
        </div>
    );
}
}

export default Upload;

在这里您可以使用fileReader()并将其设置为媒体。

如何使用reactjs在我的主页中上传图像

3 个答案: