reactのaxiosを使って送信する画像を表示したい。

Question

reactのaxiosを使って画像を送信するときに画像を画面に表示したいです。そしてAPIから文字列が返ってくるのですがこの文字列も帰ってきたら表示したいです。

質問したいこと

1. 送信する画像をどのように表示すればいいですか？
2. 文字列を画像を表示しながらその下に表示するのはどのようにすればいいですか？

現在のコード

import React from 'react'
import axios from 'axios';
 
class FileUpload extends React.Component{
    constructor(){
        super();
        this.state = {
            selectedFile:'',
        }
 
        this.handleInputChange = this.handleInputChange.bind(this);
    }
 
    handleInputChange(event) {
        this.setState({
            selectedFile: event.target.files[0],
          })
    }
 
    submit(){
        const data = new FormData() 
        
        data.append('file', this.state.selectedFile)
        console.warn(this.state.selectedFile);
        let url = "http://localhost:8000/upload.php";
 
        axios.post(url, data, { // receive two parameter endpoint url ,form data 
        })
        .then(res => { // then print response status
            console.log(res.data)
        })
 
    }
 
    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />
 
                            <h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
                            <br />
                            <div className="form-row">
                                <div className="form-group col-md-6">
                                    <label className="text-white">Select File :</label>
                                    <input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
                                </div>
                            </div>
 
                            <div className="form-row">
                                <div className="col-md-6">
                                    <button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        )  
    }
}
 
export default FileUpload;

Answer 1

単純に読み込んだ画像を表示するといった場合、axiosは関係ありません。

imgタグを用意して、ファイル読み取り後にその結果をsrcに設定すると画像表示ができます。
掲示いたしましたソースを調整しfileのchangeイベント等に適宜設定することで表示可能になるかと思います。

文字列については、追加したimgに合わせてdivやspanなどを用意してそこに表示したい文字列を差し込めばよいかと思います。

const files = document.querySelector('input[type=file]').files; // 選択されているファイルを取得
const file = this.files[0];
const reader = new FileReader();
reader.onload = function (e) {
    // ファイルの読み込みが完了した後、用意したimgに設定
    document.querySelector("img").attr("src", e.target.result);
};
// ファイル読み込み
reader.readAsDataURL(file);

---

補足

ファイルの扱いについて
エレメントのfilesはFileオブジェクトはBlob形式のオブジェクトで今回のケースのように扱うにはロードしてあげなければなりません。
MDN Web Docs(File)

そのロードはFileReaderを用いて行います。
MDN Web Docs(FileReader)

今回のケースでは、「FileReader.readAsDataURL」を使用します。
このファンクションの引数としてFileオブジェクトを渡してやります。

reader.readAsDataURL(file);

すると、このFileReaderの「onload」イベントが発火するので、ファイルの扱いたい情報はこの「onload」イベントに実装します。

reader.onload = function (e) {
    // ファイルの読み込みが完了した後、用意したimgに設定
    document.querySelector("img").attr("src", e.target.result);
};

ここで注意すべきことは、処理をイベントないに書くため、非同期的な処理として動作することです。

Comments

[hiei1]

初心者ですいません。fileupload.jsにどのようにこのコードを追加したらよいでしょうか。

[Matsumon0104]

まず、htmlに画像を表示するためのタグ(img)を追加し、また、文字列表示用のタグ(spanやdiv等問いません)を用意してください。

掲示したスクリプトの実装は、実装要件によりますが、ファイル選択時にサムネイルとして表示したい場合は、ファイルのchangeイベントである「handleInputChange」に実装してください。

表示文字列は、axiosのレスポンスを受け取っているところで処理してください。
.then(res => { // then print response status
console.log(res.data)
})

[hiei1]

return の中に<img>タグと文字列表示用のタグを追加するということでしょうか？

[Matsumon0104]

ご掲示いただいた「FileUpload」のコンポーネント内で問題ないのであれば、「return」内でよいかと思います。

[hiei1]

import React　from 'react'
import axios from 'axios';

class FileUpload extends React.Component{
constructor(){
super();
this.state = {
selectedFile:'',
}
this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
this.setState({
selectedFile: event.target.files[0],
name: event.target.data,
})
const files = document.querySelector('input[type=file]').files; // 選択されているファイルを取得
const file = this.files[0];
const reader = new FileReader();
reader.onload = function (e) {
// ファイルの読み込みが完了した後、用意したimgに設定
document.querySelector("img").attr("src", e.target.result);
};
// ファイル読み込み
r.readAsDataURL(f);
}

submit(){
const data = new FormData()

data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
let url = "http://localhost:8000/upload.php";

axios.post(url, data, { // receive two parameter endpoint url ,form data
})
.then(res => { // then print response status
this.state.name.append(res.data)
})

}

render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br /><br />

<h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
<br />
<div className="form-row">
<div className="form-group col-md-6">
<label className="text-white">Select File :</label>
<input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
</div>
<img src= '' >
</div>

<div className="form-row">
<div className="col-md-6">
<button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
</div>
</div>
</div>
</div>
</div>
)
}
}

export default FileUpload;

このような感じでしょうか？

[Matsumon0104]

エレメント取得時のセレクタを間違えなければどこにおいても大丈夫です。

[hiei1]

import React　from 'react'
import axios from 'axios';

class FileUpload extends React.Component{
constructor(){
super();
this.state = {
selectedFile:'',
name:''
}
this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
this.setState({
selectedFile: event.target.files[0],
name: event.target.data,
})
}

submit(){
const data = new FormData()

data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
let url = "http://localhost:8000/upload.php";

axios.post(url, data, { // receive two parameter endpoint url ,form data
})
.then(res => { // then print response status
this.state.name.append(res.data)
})

}

render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br /><br />

<h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
<br />
<div className="form-row">
<div className="form-group col-md-6">
<label className="text-white">Select File :</label>
<input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
</div>
<img src={this.selectedFile}/>
<div> {this.name}</div>
</div>

<div className="form-row">
<div className="col-md-6">
<button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
</div>
</div>
</div>
</div>
</div>
)
}
}

export default FileUpload;
このようにしたのですが画像が表示されません

[Matsumon0104]

filereaderでロードしていないのではないでしょうか。

こちらをご覧ください。
https://developer.mozilla.org/ja/docs/Web/API/FileReader

[Matsumon0104]

ファイルの扱いについて回答文に補足を追記しました。
ご参考になればと思います。

[hiei1]

ありがとうございます。

[hiei1]

できたのですがresizeのやり方わかりますか？

[Matsumon0104]

画像のリサイズということだと思いますが、
エレメント自体のリサイズですか？それとも、表示される画像のリサイズですか？

[hiei1]

すいません文字足らずでした。表示される画像のリサイズです。
import React　from 'react'
import axios from 'axios';
import { render } from 'react-dom'

class FileUpload extends React.Component{
constructor(){
super();
this.state = {
selectedFile:'',
name:'',
imagePreviewUrl: ''
}
this.handleInputChange = this.handleInputChange.bind(this);

}

handleInputChange(event) {
event.preventDefault()
let reader = new FileReader();
let file = event.target.files[0]
reader.onloadend = () => {
this.setState({
selectedFile: file,
//name: event.target.data,
imagePreviewUrl: reader.result
})
}
reader.readAsDataURL(file)
}

submit(){
const data = new FormData()

data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
let url = "http://localhost:8000/upload.php";

axios.post(url, data, { // receive two parameter endpoint url ,form data
})
.then(res => { // then print response status
this.state.name.append(res.data)
})

}

render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br /><br />

<h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
<br />
<div className="form-row">
<div className="form-group col-md-6">
<label className="text-white">Select File :</label>
<input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
</div>
<img src={this.state.imagePreviewUrl} />
<div> {this.name}</div>
</div>

<div className="form-row">
<div className="col-md-6">
<button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
</div>
</div>
</div>
</div>
</div>
)
}
}

export default FileUpload;
今はこんな感じにしてます。

[Matsumon0104]

ご回答いただいた内容で、どちらのリサイズがわかりかねますので、
imgエレメントのリサイズ方法について示します。

document.querySelector('img').style.height = xxx; // 高さ
document.querySelector('img').style.width = xxx; // 幅

「.style」を利用するとエレメントのスタイルを動的に調整できます。

[Matsumon0104]

また、上記回答が的を得ていない場合、「js 画像 リサイズ」でWeb検索すると
いろいろ出てきますので、納得できる答えがあるかもしれません。

[hiei1]

ありがとうございます