ファイルのアップロードの進行状況を示す React の例

ノード環境があることを確認してください npx create-react-app my-app //現在のフォルダにmy-appファイルを作成します cd my-app //ディレクトリに入ります npm install antd //antd UIコンポーネントをインストールします npm run start //プロジェクトを開始します

'react' から React をインポートします。
'antd/dist/antd.css' をインポートします。
'antd' から { Upload、message、Button、Progress } をインポートします。
'@ant-design/icons' から UploadOutlined をインポートします。

「axios」からaxiosをインポートします
axios.defaults.withCredentials = true

クラスAppはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具)
    この状態 = {
      ファイルリスト: [],
      アップロード中: false、
      ファイルサイズ: 0,
      バイフェンビ: 0
    }
  }
  //ファイルのアップロードが変更された場合、configs = {
    ヘッダー: { 'Content-Type': 'multipart/form-data' },
    資格情報: true、
    onUploadProgress: (進行状況) => {
      console.log(進行状況);
      let { loaded } = 進捗
      { ファイルサイズ } = this.state とします
      console.log(読み込まれました、ファイルサイズ);
      baifenbi = (loaded / filseSize * 100).toFixed(2) とします。
      this.setState({
        バイフェンビ
      })
    }
  }
  //クリックしてアップロードします handleUpload = () => {
    const { fileList } = this.state;
    フォームデータを作成します。
    fileList.forEach(ファイル => {
      formData.append('files[]', ファイル);
    });
    this.setState({
      アップロード中: true、
    });
    //ローカル サービスをリクエスト axios.post("http://127.0.0.1:5000/upload", formData, this.configs).then(res => {
      this.setState({
        価格: 100,
        アップロード中: false、
        ファイルリスト: []
      })
    }).finally(ログ => {
      コンソールにログを出力します。
    })
  }
  onchange = (情報) => {
    if (info.file.status !== 'アップロード中') {
      this.setState({
        ファイルサイズ: info.file.size、
        バイフェンビ: 0
      })
    }
    if (info.file.status === '完了') {
      message.success(`${info.file.name} ファイルが正常にアップロードされました`);
    } そうでない場合 (info.file.status === 'error') {
      message.error(`${info.file.name} ファイルのアップロードに失敗しました。`);
    }
  }


  与える（） {
    const { アップロード中、fileList } = this.state;
    定数プロパティ = {
      onRemove: ファイル => {
        this.setState(状態 => {
          定数インデックス = state.fileList.indexOf(ファイル);
          const newFileList = state.fileList.slice();
          新しいファイルリストをスプライスします(インデックス、1);
          戻る {
            ファイルリスト: 新しいファイルリスト、
          };
        });
      },
      アップロード前: ファイル => {
        this.setState(状態 => ({
          ファイルリスト: [...state.fileList, ファイル],
        }));
        false を返します。
      },
      ファイルリスト、
    };
    戻る （
      <div style={{ width: "80%", margin: 'auto', padding: 20 }}>
        <h2>{this.state.baifenbi + '%'}</h2>
        <アップロード onChange={(e) => { this.onchange(e) }} {...props}>
          <ボタン>
            <UploadOutlined /> クリックしてアップロード
          </ボタン>
        </アップロード>
        <ボタン
          タイプ="プライマリ"
          onClick={this.handleUpload}
          無効 = {fileList.length === 0}
          読み込み中={アップロード中}
          スタイル={{ marginTop: 16 }}
        >
          {アップロード中? 'アップロード中' : 'アップロードを開始'}
        </ボタン>
        <Progress style={{ marginTop: 20 }} status={this.state.baifenbi !== 0 ? 'success' : ''} percent={this.state.baifenbi}></Progress>
      </div>
    ）
  }
}

デフォルトのアプリをエクスポートします。

1.まずwebSeverフォルダを作成します
  cd ウェブサーバー
  npm -init -y //package.jsonファイルを作成する 2. expressとファイルのアップロードに必要なパッケージをインストールする npm install express multer ejs

3. app.jsを作成する

var express = require('express');
var app = express();
var パス = require('パス');
var fs = require('fs')
var multer = require('multer')
//クロスドメインアクセスを設定する app.all("*", function (req, res, next) {
    // ドメイン間を移動できるドメイン名を設定します。* は、任意のドメイン名がドメイン間を移動できることを表します。res.header("Access-Control-Allow-Origin", req.headers.origin || '*');
    // // 許可されるヘッダー タイプ res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
    // // クロスドメインで許可されるリクエスト メソッドres.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    // クッキーは許可されています
    res.header("アクセス制御許可資格情報", true);
    if (req.method == 'OPTIONS') {
        res.sendStatus(200);
    } それ以外 {
        次（）;
    }
})


app.use(express.static(path.join(__dirname, 'public')));
//テンプレート エンジン app.set('views', path.join(__dirname, 'views'));
app.set('ビューエンジン', 'ejs');

app.get("/", (req, res, next) => {
    res.render("インデックス")
})
// ファイルをアップロード app.post('/upload', (req, res, next) => {

    var upload = multer({ dest: 'upload/' }).any();
  
    アップロード(req, res, err => {
      もし（エラー）{
        コンソールログ(エラー);
        戻る
      }
      ファイルをreq.files[0]とします
      filname = file.originalname とします
      var oldPath = ファイル.パス
      var newPath = path.join(process.cwd(), "upload/" + new Date().getTime()+filname)
      var src = fs.createReadStream(oldPath);
      var dest = fs.createWriteStream(newPath);
      src.pipe(dest);
      src.on("終了", () => {
        ファイルパスをpath.join(process.cwd(), oldPath)とします。
        fs.unlink(ファイルパス、エラー => {
          もし（エラー）{
            コンソールログ(エラー);
            戻る
          }
          res.send("ok")
        })
  
      })
      src.on("エラー", err => {
        res.end("エラー")
      })
  
    })
  
  })
  

app.use((req, res) => {
    res.send("404")
})
アプリを聴く(5000)