Node.jsはexpress-fileuploadミドルウェアを使用してファイルをアップロードします

この記事では、サーバーとして express を使用し、 express-fileupload ライブラリが提供するミドルウェア機能を使用して、クライアントから画像を受け取り、サーバー上にファイルとして保存します。クライアントは、create-react-app フレームワーク、bootstrap UI、axios を使用して http リクエストを送信し、進行状況バーの現在の進行状況値を提供します。アップロードが成功すると、サーバー上の場所に応じて画像が表示されます。

プロジェクトを初期化する

mkdir react-file-upload // プロジェクトのルートディレクトリを作成する cd react-file-upload
npm init -y // npm を初期化し、package.json を作成します

必要な依存関係をインストールする

npm i express express-fileupload
npm i -D nodemon parallelly // クライアントとサーバーを並行して実行できます (ローカルマシンでテスト)

react-file-upload/package.jsonのスクリプトを変更する

{
  "メイン": "server.js",
  「スクリプト」: {
    "開始": "ノードサーバー.js", 
    "サーバー": "nodemon server.js",
    "クライアント": "npm start --prefix クライアント",  
    "dev": " 同時に \"npm run server\" \"npm run client\" "
  }
}

main から server.js へ
ノードを使用してエクスプレスを開始する
サーバーは、Express を起動するために nodemon を使用します。nodemon は、server.js ファイルが変更されたかどうかを監視します (ctrl+S)。変更があった場合はサーバーを再起動しますが、ノードの起動は再起動されません。サービスを手動で再起動する必要があります (ctrl+C を押して、ファイルを変更した後で node server.js を再実行します)。
クライアントはクライアントを起動し、Reactコンポーネントを書き込むためのクライアントフォルダを作成します。
devはconcurrentlyを使用してサーバーとクライアントを同時に起動します

サーバーの作成

server.jsファイルを書きましょう

定数 express = require('express');
const fileUpload = require('express-fileupload');

express() は、定数です。
// express-fileupload ミドルウェアを使用する app.use( fileUpload() );

// /upload ページから送信された投稿リクエストを処理する app.post('/upload', (req, res) => {
  // req の files プロパティは express-fileupload ミドルウェアによって追加されます!? (質問は一時的に保存されています)
  // ファイル属性が存在するかどうかを確認し、ファイルが存在する場合は 400 を返します。存在しない場合は 400 を返します。
  （req.files === null）の場合{
    res.status(400).json({msg:'ファイルがアップロードされていません'});を返します。
  }
  // それ以外の場合はファイルを取得します // ファイルは次のテキストの formData.append('file', file) の最初のパラメータによって定義され、他の名前にカスタマイズできます const file = req.files.file;
  // ファイルを最初のパラメータで指定された場所に移動します。エラーが発生した場合は 500 を返します。
  file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
    もしエラーが起きたら
      コンソールエラー(err);
      res.status(500).send(err) を返します。
    }
    // エラーがない場合はjsonを返す 
    // アップロード後、サーバー上のファイルのパスに従ってアップロードされたファイルを表示する予定です // 次に、これを react コンポーネントに実装します // アップロードされたファイルを保存するために、クライアントの public フォルダーの下に uploads フォルダーを作成します res.json({fileName: file.name, filePath: `uploads/${file.name}`});
  });
});

app.listen(5000,() => {console.log('サーバーが起動しました...')});

ここで、server.js を再度実行して、エラーがないことを確認します。コンソールにサーバーが起動したことが表示されます...

npm 実行サーバー

クライアントを初期化する

次にクライアントを作成し、create-react-app scaffoldingを使用してプロジェクトを初期化します。

npx create-react-app クライアント

初期化が完了したら、不要なファイルを選択的に削除することができます。

サービスワーカー.js
ロゴ.svg
index.css // 後でリンクタグを使用して、cdn から bootstrap をインポートします。
App.test.js // ちょっとしたデモ

src/index.jsファイルに導入されたindex.cssを削除し、publicフォルダ内のindex.htmlテンプレートファイルにbootstrap cssとjsを直接導入します。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8" />
    <link rel="ショートカットアイコン" href="%PUBLIC_URL%/favicon.ico" rel="外部 nofollow" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1" />
    <meta name="テーマカラー" content="#000000" />
    <!-- CSS をインポート -->
    <link rel="スタイルシート" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="外部 nofollow" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="匿名">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="外部 nofollow" />
    <title>React ファイルアップローダー</title>
  </head>
  <本文>
    <noscript>このアプリを実行するには、JavaScript を有効にする必要があります。</noscript>
    <div id="ルート"></div>
    <!-- js をインポート -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" クロスオリジン="匿名"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </本文>
</html>

コンポーネントの記述

合計3つのコンポーネントを書く必要があります。

FileUpload.js: フォームタグのonSubmitとaxiosを使用してアップロードリクエストを送信する
Message.js: アップロード成功、サーバーエラー、またはファイルが選択されていないことに関する情報を表示します。
Progress.js: axios の onUploadProgress と bootstrap を使用してアップロードの進行状況バーを表示する

ファイルアップロード

React をインポートし、{useState} を 'react' から取得します。
'axios' から axios をインポートします
'./Message' からメッセージをインポートします
'./Progress' から Progress をインポートします

定数FileUpload = () => {

  戻る （
    <div>
      {メッセージ ? <メッセージ msg={message} />: null}
      <フォームonSubmit={onSubmit}>
        <div className="カスタムファイル mb-4">
          <input type="file" className="custom-file-input" id="customFile" onChange={onChange}></input>
          <label className="custom-file-label" htmlFor="customFile">{ファイル名}</label>
        </div>
        <進捗率={uploadedPercentage}></進捗>
        <input className="btn btn-primary btn-block mt-4" type="submit" value="アップロード"></input>
      </フォーム>
      {
        アップロードされたファイル? 
          <div className="行 mt-5">
            <div className="col-md-6 m-auto">
              <h3 className="text-center">{アップロードされたファイル名}</h3>
              <img style={{width:'100%'}} src={uploadedFile.filePath} alt=""></img>
            </div>
          </div> :
          <p>まだ何もアップロードされていません...</p>
      }
    </div>
  ）
}
デフォルトのFileUploadをエクスポート

メッセージ.js

'react' から React をインポートします
'prop-types' から PropTypes をインポートします

定数メッセージ = ({msg}) => {
  console.log('彼女')
  戻る （
    <div className="アラート アラート情報 アラート非表示 フェード表示" role="アラート">
      {メッセージ}
      <button type="button" className="close" data-dismiss="alert" aria-label="閉じる">
        <span aria-hidden="true">&times;</span>
      </ボタン>
    </div>
  ）
}
メッセージ.propTypes = {
  メッセージ: PropTypes.string.isRequired、
}
デフォルトメッセージをエクスポート

進捗状況

'react' から React をインポートします
'prop-types' から PropTypes をインポートします

const Progress = ({パーセンテージ}) => {
  戻る （
    <div className="進捗状況">
      <div className="プログレスバー" role="プログレスバー" 
        スタイル={{ 幅: `${パーセント}%` }} 
        aria-valuenow={パーセンテージ} aria-valuemin="0" aria-valuemax="100">{パーセンテージ}%</div>
    </div>
  ）
}
Progress.propTypes = {
  パーセンテージ: PropTypes.number.isRequired、
}
デフォルトのエクスポートの進行状況

テスト

これまでに、すべての機能コンポーネントが完成しました。

npm 実行 dev

最後に、gitアドレスを添付します。Git

これで、node.js の express-fileupload ミドルウェアを使用してファイルをアップロードする方法についての説明は終わりです。node.js のファイルアップロードに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: