React+Koa によるファイルアップロードの実装例

app.use(async (ctx, next) => {
 ctx.set('アクセス制御許可オリジン', '*');
 ctx.set(
  「アクセス制御許可ヘッダー」、
  'Content-Type、Content-Length、Authorization、Accept、X-Requested-With、yourHeaderFeild'、
 );
 ctx.set('アクセス制御許可メソッド', 'PUT、POST、GET、DELETE、OPTIONS');
 ctx.method == 'OPTIONS'の場合{
  ctx.body = 200;
 } それ以外 {
  次の()を待ちます。
 }
});

// 静的リソース処理 app.use(
 KoaStaticCache('./public', {
  プレフィックス: '/public'、
  動的: true、
  gzip: 真、
 }）、
);

bodyParser は 'koa-bodyparser' を必要とします。
app.use(bodyParser());

 // アップロード設定 const uploadOptions = {
// ファイル形式をサポートする multipart: true,
 恐ろしい:
  // ディレクトリをパブリックフォルダに直接アップロードします。簡単にアクセスできるように、フォルダの後に / を追加することを忘れないでください
  アップロードディレクトリ: path.join(__dirname, '../../pulbic/'),
  // ファイル拡張子を保持する keepExtensions: true,
 },
};
router.post('/upload', 新しい KoaBody(uploadOptions), (ctx, next) => {
 // アップロードされたファイルを取得します。const file = ctx.request.files.file;
 定数 fileName = file.path.split('/')[file.path.split('/').length-1];
 ctx.body = {
   コード:0,
   データ：{
    url:`public/${fileName}`
   },
   メッセージ: '成功'

 }
});

   const アップロード = () => {
   const [url, setUrl] = useState<文字列>('')
   const handleClickUpload = () => {
     const fileLoader = document.querySelector('#btnFile') を HTMLInputElement として定義します。
     if (isNil(fileLoader)) {
       戻る;
     }
     ファイルローダーをクリックします。
   }
   const handleUpload = async (e: any) => {
     //アップロードされたファイルを取得します。const file = e.target.files[0];
     const フォームデータ = 新しいフォームデータ()
     formData.append('ファイル', ファイル);
     // ファイルをアップロード const { data } = await uploadSmallFile(formData);
     コンソールにログ出力します。
     setUrl(`${baseURL}${data.url}`);
   }
   戻る （
     <div>
       <input type="file" id="btnFile" onChange={handleUpload} style={{ display: 'none' }} />
       <Button onClick={handleClickUpload}>小さいファイルをアップロード</Button>
       <画像ソース={url} />
     </div>
   ）
 }

  const handleUploadLarge = async (e: any) => {
     //アップロードされたファイルを取得します。const file = e.target.files[0];
     // ファイル セグメントの場合、await uploadEveryChunk(file, 0);
   }
   定数アップロード毎チャンク = (
     ファイル: ファイル、
     インデックス: 番号、
   ) => {
     コンソールログ(インデックス);
     const chunkSize = 512; // スライス幅 // [ファイル名、ファイルサフィックス]
     const [fname, fext] = file.name.split('.');
     // 現在のスライスの開始バイトを取得します。const start = index * chunkSize;
     if (start > file.size) {
       // ファイルサイズを超えたら再帰アップロードを停止します return mergeLargeFile(file.name);
     }
     const blob = file.slice(start, start + chunkSize);
     // 各ピースに名前を付けます const blobName = `${fname}.${index}.${fext}`;
     const blobFile = 新しいファイル([blob]、blobName);
     フォームデータを作成します。
     formData.append('file', blobFile);
     アップロードLargeFile(formData).then((res) => {
       // 再帰アップロード uploadEveryChunk(file, ++index);
     });
   };

const アップロードステンシルプレビューオプション = {
マルチパート: true、
恐ろしい:
 uploadDir: path.resolve(__dirname, '../../temp/'), // ファイル保存アドレス keepExtensions: true,
 最大フィールドサイズ: 2 * 1024 * 1024、
},
};

router.post('/upload_chunk', 新しい KoaBody(uploadStencilPreviewOptions), 非同期 (ctx) => {
試す {
 const ファイル = ctx.request.files.file;
 // [ name, index, ext ] - ファイル名を分割します const fileNameArr = file.name.split('.');

 const UPLOAD_DIR = path.resolve(__dirname, '../../temp');
 // スライスを保存するディレクトリ const chunkDir = `${UPLOAD_DIR}/${fileNameArr[0]}`;
 if (!fse.existsSync(chunkDir)) {
  // ディレクトリが存在しない場合はディレクトリを作成します // 大きなファイル用の一時ディレクトリを作成します await fse.mkdirs(chunkDir);
 }
 // 元のファイル名.index - 各シャードの特定のアドレスと名前 const dPath = path.join(chunkDir, fileNameArr[1]);

 // 断片化されたファイルを temp から今回アップロードした大きなファイルの一時ディレクトリに移動します。await fse.move(file.path, dPath, { overwrite: true });
 ctx.body = {
  コード: 0,
  メッセージ: 「ファイルが正常にアップロードされました」
 };
} キャッチ (e) {
 ctx.body = {
  コード: -1、
  メッセージ: `ファイルのアップロードに失敗しました: ${e.toString()}`、
 };
}
});

router.post('/merge_chunk', 非同期(ctx) => {
 試す {
  const { ファイル名 } = ctx.request.body;
  定数 fname = ファイル名.split('.')[0];
  TEMP_DIR は path.resolve(__dirname, '../../temp');
  const static_preview_url = '/public/previews';
  STORAGE_DIR は path.resolve(__dirname, `../..${static_preview_url}`);
  TEMP_DIR を path に結合します。
  const チャンク = fse.readdir(chunkDir);
  チャンク
   .sort((a, b) => a - b)
   .map((チャンクパス) => {
    // ファイルをマージする fse.appendFileSync(
     パス.join(STORAGE_DIR, ファイル名),
     fse.readFileSync(`${chunkDir}/${chunkPath}`)、
    );
   });
  // 一時フォルダを削除します fse.removeSync(chunkDir);
  // 画像にアクセスするためのURL
  const url = `http://${ctx.request.header.host}${static_preview_url}/${fileName}`;
  ctx.body = {
   コード: 0,
   データ: { url },
   メッセージ: '成功'、
  };
 } キャッチ (e) {
  ctx.body = { コード: -1、メッセージ: `マージに失敗しました: ${e.toString()}` };
 }
});

  const handleUploadLarge = async (e: any) => {
    //アップロードされたファイルを取得します。const file = e.target.files[0];
    const レコード = JSON.parse(localStorage.getItem('uploadRecord') を any として);
    if (!isNil(レコード)) {
      // 便宜上、ここでは衝突の問題は考慮しません。ファイルが同じかどうかを判断するには、ハッシュファイル方式を使用できます。 // 大きなファイルの場合は、ハッシュ（ファイル + ファイルサイズ）方式を使用して、2 つのファイルが同じかどうかを判断できます if (record.name === file.name) {
        戻り値 uploadEveryChunk(file, record.index);
      }
    }
    // ファイル セグメントの場合、await uploadEveryChunk(file, 0);
  }
  定数アップロード毎チャンク = (
    ファイル: ファイル、
    インデックス: 番号、
  ) => {
    const chunkSize = 512; // スライス幅 // [ファイル名、ファイルサフィックス]
    const [fname, fext] = file.name.split('.');
    // 現在のスライスの開始バイトを取得します。const start = index * chunkSize;
    if (start > file.size) {
      // ファイルサイズを超えたら再帰アップロードを停止します return mergeLargeFile(file.name).then(()=>{
        // マージが成功したらレコードを削除します localStorage.removeItem('uploadRecord')
      });
    }
    const blob = file.slice(start, start + chunkSize);
    // 各ピースに名前を付けます const blobName = `${fname}.${index}.${fext}`;
    const blobFile = 新しいファイル([blob]、blobName);
    フォームデータを作成します。
    formData.append('file', blobFile);
    アップロードLargeFile(formData).then((res) => {
      // 各データが正常に転送された後、レコードの場所が記録されます localStorage.setItem('uploadRecord',JSON.stringify({
        名前:ファイル名、
        インデックス:インデックス+1
      }))
      // 再帰アップロード uploadEveryChunk(file, ++index);
    });
  };

// md5 を計算して、すでに存在するかどうかを確認します。const sign = tempFile.slice(0, 512);
   const signFile = 新しいファイル(
    [sign、(tempFile.size は不明) は BlobPart]、
    ''、
   );
   const リーダー = 新しい FileReader();
   reader.onload = 関数 (イベント) {
    const バイナリ = イベント?.ターゲット?.結果;
    const md5 = binary && CryptoJs.MD5(binary を文字列として).toString();
    定数レコード = localStorage.getItem('upLoadMD5');
    if (isNil(md5)) {
     const file = blobToFile(blob, `${getRandomFileName()}.png`);
     uploadPreview(ファイル、0、md5)を返します。
    }
    const file = blobToFile(blob, `${md5}.png`);
    if (isNil(レコード)) {
     // このmd5を直接アップロードして記録します
     uploadPreview(ファイル、0、md5)を返します。
    }
    レコードを解析します。
    (recordObj.md5 == md5)の場合{
     // 記録された位置からアップロードを開始します // ブレークポイントからアップロードを再開します return uploadPreview(file, recordObj.index, md5);
    }
    uploadPreview(ファイル、0、md5)を返します。
   };
   リーダー。バイナリ文字列として読み取ります。(signFile)