Question

但是，由于某些原因，我试图在reactjs中创建imagePreview，但未显示。我搜索了它，人们在其中使用了引用。能否请别人告诉我为什么我们需要这里的参考以及如何显示预览。这是我的完整代码。

import React from 'react';
import Axios from 'axios';

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      file: '',

    };


  }

  onChange = (e) => {
    this.setState({ file: e.target.files[0] })
  }

  onFormSumbit = (e) => {
    e.preventDefault()
    const formData = new FormData();
    formData.append('file', this.state.file)

    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

    Axios.post('http://localhost:3001/upload', formData, config).then((response) => {
      console.log(response);
    })

  }




  render() {
    return (
      <>
        <img src={this.state.file[0]} alt="preview" />
        <form onSubmit={this.onFormSumbit}>
          <input type="file" onChange={this.onChange} name="foo" />
          <button type="submit">Upload</button>
        </form>
      </>
    );
  }
}

export default Main;

Answer 1

修复了渲染功能：

render() {
    return (
      <>
        <img src={this.state.file} alt="preview" />
        <form onSubmit={this.onFormSumbit}>
          <input type="file" onChange={this.onChange} name="foo" />
          <button type="submit">Upload</button>
        </form>
      </>
    );
  }

在onChange函数中，您已经在分配第[0]个元素。

  onChange = (e) => {
    this.setState({ file: e.target.files[0] })
  }

所以我从<img src={this.state.file[0]} alt="preview" />中删除了[0]

反应中未显示图像预览

1 个答案: