Question

我只想显示上传的图像。不想保存到服务器，只想显示上传的图片。

我正在使用

<p><img src={this.state.selectedFile}/></p>

显示图像。

这是我的 App.js 文件：

import React,{Component} from 'react';
class App extends Component {
    state = {
    // Initially, no file is selected
    selectedFile: null
    };
    // On file select (from the pop up)
    onFileChange = event => {
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
    };
    // File content to be displayed after
    // file is picked
    fileData = () => {
    if (this.state.selectedFile) {
        return (
        <div>
        <h2>File Details:</h2>
        <p>Last Modified:{" "}{this.state.selectedFile.lastModifiedDate.toDateString()}</p> 
        <p>File Name: {this.state.selectedFile.name}</p>
        <p>File Type: {this.state.selectedFile.type}</p>
        <p><img src={this.state.selectedFile} width="100" height="50"/></p>
        </div>
        );
    } 
    };
    render() {
    return (
        <div>
            <div>
                <input type="file" onChange={this.onFileChange} />
            </div>
        {this.fileData()}
        </div>
    );
    }
}
export default App;

这是我的 index.html 文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
    <body>
    <div id="upload">
    </div>
    </body>
    </html>

Here is my index.js file:
    import ReactDOM from 'react-dom';
    import React,{Component} from 'react';
    import App from './App';
    
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('upload')
    );

这是我的 index.js 文件：

import ReactDOM from 'react-dom';
import axios from 'axios';
import React,{Component} from 'react';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('upload')
);

我可以显示有关图像的统计信息，例如文件名和文件类型。但是我无法显示图像本身，我只是得到一个损坏的图像图标。

Answer 1

必须读取指定的 Blob 或 File 的内容，读取使用 FileReader.readAsDataURL()

const {useState} = React;

const fileToDataUri = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result)
    };
    reader.readAsDataURL(file);
    })

const App = () => {
  const [dataUri, setDataUri] = useState('')

  const onChange = (file) => {
    
    if(!file) {
      setDataUri('');
      return;
    }

    fileToDataUri(file)
      .then(dataUri => {
        setDataUri(dataUri)
      })
    
  }

  return <div>
  <img width="200" height="200" src={dataUri} alt="avatar"/>
  <input type="file" onChange={(event) => onChange(event.target.files[0] || null)} />
  </div>
}


ReactDOM.render(
    <App/>,
    document.getElementById('root')
  );

反应文件上传和显示图像而不保存上传到服务器

1 个答案: