存储在 FileList 中的图像未显示在 React 中

Question

我正在 React 中处理文件上传，将文件存储在 FileList 中并显示预览。图像似乎存储正确，但没有呈现并且alt文本不断显示。

this.props.file 包含这样的东西： file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b"

上传组件的代码如下：

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import './Upload.css';

import { setFile } from '../../actions/imagefile';

class Upload extends Component {

  static propTypes = {

    history: PropTypes.object,

    setFile: PropTypes.func,

    file: PropTypes.object,

  }

  handleChange = (event) => {

    this.props.setFile({

      file: URL.createObjectURL(event.target.files[0]),

    });

  }

  render() {

    return (

      <div>

        <input type="file" onChange={this.handleChange} />

        <img src={this.props.file} alt="reviewed img" />

      </div>

    );

  }

}

const mapStateToProps = (state) => ({

  file: state.imageFile.file,

});

export default connect(mapStateToProps, {

  setFile,

})(Upload);

Answer 1

this.props.file包含这样的事情：file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b"。由此我推断这this.props.file是一个具有结构的对象{&nbsp; file: "blob:http://localhost:3000/1d648245-4447-41a4-b11e-a5a7b385bb9b"}你的propTypes定义也说props.file是一个对象file: PropTypes.object所以你应该改变你的代码<img src={this.props.file.file} alt="reviewed img" />结帐链接：https://stackblitz.com/edit/react-ubtvsc?file=Upload.js但是，您应该重构代码以避免这种不必要的嵌套。