をアップロードして写真を提供する方法

このブログでは、最も簡単で最速の方法を介して反応クライアントからの写真をアップロードするには、ノードサーバーに転送し、どのようにクライアントにその写真を表示するつもりです.
あなたがすでに設定され、接続されているアプリケーションのこれらのコンポーネントを持っていると仮定すると、まず、選択したファイルを処理するための基本的なボタンと機能から始めましょう.

<input type="file" name="file" onChange={this.uploadHandler}/>

uploadHandler(event) {
  // code goes here
}

このデモでは、クラスコンポーネントを使用してサンプルを表示することに注意してください.
今、あなたのアップロードハンドラ機能の中で、あなたはファイルをポストリクエストで送ることができる何かに変える必要があります.この例ではaxiosを使います.
アップロードハンドラ関数は以下のようになります.

  uploadHandler(event) {
    const data = new FormData();
    data.append('file', event.target.files[0]);

    axios.post('/upload', data)
      .then((res) => {
        this.setState({ photos: [res.data, ...this.state.photos] });
      });
  }

ここでは、我々はFormData とファイルを追加する.append() . ファイルの詳細もコンソールのログで見ることができますevent.target.files[0] , この場合、次のようになります.

今、あなたの急行サーバーの場合は、コマンドを介して、すでにそれを持っていない場合は、multerをインストールする必要がありますnpm install multer . 次に、これを追加します.あなたのポストルートがどこに行こうとも、あなたの急行サーバーのためのJSファイル:

const multer = require('multer')

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public')
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' +file.originalname)
  }
})

const upload = multer({ storage: storage }).single('file')

ここから必要なのはupload 関数はstorage and multer それ以上.ミュールで.上記のDiskStorageオブジェクト、「目的地」の「パブリック」ストリングはフォルダ名があなたの写真が保存されるところであることを望むものに変えられることができます.このフォルダは、デフォルトでは、アプリケーション全体のルートフォルダにあります.
加えてDate.now() + '-' +file.originalname 以下は、保存された写真が保存されるファイル名を指定します.そのまま残しておくと、元のファイル名は保存されますが、JavaScriptフォーマットされた日付でダッシュが続きます.
さて、ポストルートのために.

app.post('/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      res.sendStatus(500);
    }
    res.send(req.file);
  });
});

ご覧の通り、上記の通りupload() 関数は、最初のエクスプレスからREQとRESオブジェクトを処理していますapp.post . ファイルを保存できない場合は500を送信することで基本的なエラー処理を行いますが、それ以外の場合は保存されたファイルについての情報を返します.ちょうど1つのことは、サーバーが実際には、クライアントに戻ってそのファイルを提供するために必要になります残っている.

app.use(express.static('public'));

これをあなたの急行サーバーインデックスの一番下に加えてください.jsファイル.ここの「パブリック」文字列は、イメージファイルを格納するフォルダーという名前のものを再度参照します.では、クライアントからのAxiosリクエストを見てみましょう.

axios.post('/upload', data)
      .then((res) => {
        this.setState({ photos: [res.data, ...this.state.photos] });
      });

に.then() , res.data 保存されたファイルについての詳細を持つオブジェクトを含みます.this.setState({ photos: [res.data, ...this.state.photos] }); このオブジェクトを' Photoshop '配列の先頭に追加しますthis.state .
さて、あなたのrender() , アップロードボタンの下に、このようなものを追加することができますlocalhost あなたのアプリケーションが提供されているホストと3000 ポート番号ですか

        {this.state.photos.map(photo => (
          <img src={`http://localhost:3000/${photo.filename}`} />
        ))}

デフォルトではapp.use(express.static('public')) , ' public 'フォルダ内の写真は'/'エンドポイントでファイル名が続きます.ので、我々は逆の順序でそれらを追加しているので、上の最新の存在で、上記のマップ機能を使用すると、それらを追加するように1つずつ写真を1つ表示する必要があります.
クライアント側アプリケーションのコードの最終結果は以下の通りです.

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photos: [],
    };

  this.uploadHandler = this.uploadHandler.bind(this);
  }

  uploadHandler(event) {
    const data = new FormData();
    data.append('file', event.target.files[0]);
    axios.post('/upload', data)
      .then((res) => {
        this.setState({ photos: [res.data, ...this.state.photos] });
      });
  }

  render() {
    return  (
      <div>
        <div>
          <input type="file" name="file" onChange={this.uploadHandler}/>
        </div>
        {this.state.photos.map(photo => (
          <img src={`http://localhost:3000/${photo.filename}`} />
        ))}
      </div>
    )
  }
}

export default App;

私がしたデモンストレーションは、最も速く、最も基本的な方法で、ファイルをアップロードして、反応システム、ノード、および表現で働く検索システムを得る方法を示します.最終的には、複数のファイルのアップロード、より高度なエラー処理、進行状況インジケータ、データベースにURLを保存し、おそらくファイルを選択し、ファイルをアップロードする別のプロセスのようなより高度な機能を追加する必要があります.しかし、デモを開始するのに十分なはずです.ようこそアプリでファイルのアップロード機能を行うことができるので、うまくいけば、このデモを開始するのに役立ちます.