質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

hiei1
hiei1

総合スコア46

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

393閲覧

投稿2022/06/09 05:25

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

質問したいこと

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

現在のコード

fileupload.js

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;

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。