ファイル選択させて画像表示する

React

参考リンク

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;

Translating SQLException with SQL state '42000', error code '1064', message [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'desc,

MyBatis

予約語をcolumnに使った場合はバッククウォートで囲わないとダメ

### Translating SQLException with SQL state '42000', error code '1064'
### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'desc, .......

MySQL 予約後

dev.mysql.com