- フォームデータを使用したファイルのアップロード

fastify.post("/upload-octet-stream", async function handler(request) {
  const filename = request.headers["x-file-name"] ?? "unknown.text";

  const data = request.body;
  const filePath = path.join(DIR_TO_UPLOAD, filename);

  await writeFile(filePath, data);

  return { uploaded: true };
});

「ファイルをアップロード」ボタンをクリックした場(chǎng)合:

1. uploadFile 関數(shù)が実行され、非表示の が作成されます。要素を追加し、ユーザーのクリックをシミュレートします。
2. ユーザーが 1 つ以上のファイルを選択すると、それらのファイルは FormData オブジェクトに追加されます。
3. リクエストは /upload-multiples エンドポイントに送信され、multipart/form-data 経由でファイルを受け取ります。

これにより、サーバーはアップロードされたファイルを適切に処理し、保存できるようになります。

- Octet Streamを使用したファイルのアップロード

  const downloadFile = async () => {
    const response = await fetch(DOWNLOAD_API);

    if (!response.ok) throw new Error("Failed to download file");

    const blob = await response.blob();

    const contentDisposition = response.headers.get("Content-Disposition");

    const isInline = contentDisposition?.split(";")[0] === "inline";
    const filename = contentDisposition?.split("filename=")[1];

    const url = window.URL.createObjectURL(blob);

    if (isInline) {
      window.open(url, "_blank");
    } else {
      const a = document.createElement("a");
      a.href = url;
      a.download = filename || "file.txt";
      a.click();
    }

    window.URL.revokeObjectURL(url);
  };

このアプローチは、multipart/form-data を使用するよりも簡(jiǎn)単です。ファイルをバイナリ データとしてリクエスト本文に直接送信し、リクエスト ヘッダーにファイル名を含めるだけです。

モバイル（エキスポ）

次のコマンドでアプリを起動(dòng)できます:

1. 端末のモバイル ディレクトリに移動(dòng)します。
2. 依存関係をインストールします: npm install
3. npm run android または npm run ios でプロジェクトを?qū)g行します

メイン ロジックは App.tsx にあり、ここで次の內(nèi)容がレンダリングされます。

fastify.get("/download", async function handler(_, reply) {
  const fd = await open(FILE_TO_DOWNLOAD);
  const stream = fd.createReadStream();

  const mimeType = mime.lookup(FILE_TO_DOWNLOAD);

  console.log(`Downloading -> ${FILE_TO_DOWNLOAD}`);

  return reply
    .type(mimeType)
    .header(
      "Content-Disposition",
      `attachment; filename=${path.basename(FILE_TO_DOWNLOAD)}`
    )
    .send(stream);
});

ファイルを新しいビューで表示するには (ブラウザーが新しいタブでファイルを開く場(chǎng)合と同様)、応答を BLOB として読み取り、FileReader を使用してそれを Base64 に変換する必要があります。

キャッシュ ディレクトリ (アプリのみがアクセスできるプライベート ディレクトリ) にファイルを書き込み、IntentLauncher またはユーザーが iOS を使用している場(chǎng)合は共有を使用してそのファイルを表示します。

- ダウンロードファイル

fastify.post("/upload-multiples", async function handler(request) {
  const parts = request.files();
  const uploadResults = [];

  for await (const file of parts) {
    const fileBuffer = await file.toBuffer();
    const filename = file.filename;
    const filePath = path.join(DIR_TO_UPLOAD, filename);

    await writeFile(filePath, fileBuffer);
    uploadResults.push({ filename, uploaded: true });
    console.log(`Uploaded -> ${filePath}`);
  }

  return { uploadedFiles: uploadResults };
});

これは Web プロセスに似ていますが、FileReader を使用して BLOB を Base64 として読み取り、ユーザーがファイルを保存したい場(chǎng)所にファイルをダウンロードする許可を求める必要があります。

- フォームデータを使用したファイルのアップロード

fastify.post("/upload-octet-stream", async function handler(request) {
  const filename = request.headers["x-file-name"] ?? "unknown.text";

  const data = request.body;
  const filePath = path.join(DIR_TO_UPLOAD, filename);

  await writeFile(filePath, data);

  return { uploaded: true };
});

DocumentPicker を使用してユーザーがファイルを選択できるようにし、FormData を使用して選択したファイルをリクエストに追加します。プロセスは非常に簡(jiǎn)単です。

- ファイルをオクテット ストリームとしてアップロード

  const downloadFile = async () => {
    const response = await fetch(DOWNLOAD_API);

    if (!response.ok) throw new Error("Failed to download file");

    const blob = await response.blob();

    const contentDisposition = response.headers.get("Content-Disposition");

    const isInline = contentDisposition?.split(";")[0] === "inline";
    const filename = contentDisposition?.split("filename=")[1];

    const url = window.URL.createObjectURL(blob);

    if (isInline) {
      window.open(url, "_blank");
    } else {
      const a = document.createElement("a");
      a.href = url;
      a.download = filename || "file.txt";
      a.click();
    }

    window.URL.revokeObjectURL(url);
  };

Application/octet-stream としてアップロードするのは、FormData を使用するよりもさらに簡(jiǎn)単です。ヘッダーにファイルの詳細(xì)とコンテンツ タイプを設(shè)定し、ファイルをリクエスト本文に追加するだけです。

結(jié)論

プラットフォーム間でファイルを表示、ダウンロード、アップロードする方法は少しわかりにくいかもしれません。この投稿では最も一般的なものを説明しました。

お役に立てれば幸いです?

@twitter をフォローしてください

以上がReact & Expo - ファイルのアップロードとダウンロード方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。