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

【问题标题】：react file upload and display image without saving upload to server反应文件上传并显示图像而不保存上传到服务器
【发布时间】：2021-07-14 00:28:01
【问题描述】：

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

我正在使用

<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')
);

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

【问题讨论】：

标签： reactjs

【解决方案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')
  );

【讨论】：