存储在 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是一个具有结构的对象

{

  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

但是，您应该重构代码以避免这种不必要的嵌套。