参考リンク
ja.reactjs.org
概要
- ファイル選択ボタン, 画像表示エリアを用意
- ファイル選択アクションで画像を表示する
React Appの新規作成
$ npx create-react-app my-react-app
表示するComponentを作成
FileUpload.js
import React, { Component } from 'react';
class FileUpload extends Component {
constructor(props) {
super(props);
this.state = {
blobURL: null
};
this.fileInput = React.createRef();
}
onAccessFile() {
const file = this.fileInput.current.files[0];
console.log(file);
if (file === null || file === undefined) {
this.setState({
blobURL: null
});
return;
}
const blobURL = (window.URL || window.webkitURL).createObjectURL(file);
console.log(blobURL);
this.setState({
blobURL
});
}
render() {
const blobURL = this.state.blobURL;
console.log(blobURL);
return (
<div>
<input
type="file"
accept="image/bmp,image/gif,image/jpeg,image/png"
onChange={() => this.onAccessFile()}
ref={this.fileInput} />
<br />
{blobURL
&& <img src={blobURL} alt="画像" width={300} height={200} />
}
</div>
)
}
}
export default FileUpload;
App.js
import React from 'react';
import './App.css';
import FileUpload from './FileUpload';
function App() {
return (
<div className="App">
<header className="App-header">
<FileUpload />
</header>
</div>
);
}
export default App;