介紹

我很難找到關(guān)于如何在基于 Expo 的移動(dòng)應(yīng)用程序中上傳和下載文件的清晰示例。為了幫助面臨同樣挑戰(zhàn)的其他人或任何只是好奇的人，我寫(xiě)了這篇文章。

在此過(guò)程中，我們將探索有助于理解的關(guān)鍵概念：

• 緩沖區(qū)
• 意圖過(guò)濾器
• MIME 類(lèi)型
• 應(yīng)用程序/八位字節(jié)流
• 多部分/表單數(shù)據(jù)
• 還有更多...

我們將涵蓋的內(nèi)容：

• 使用 Fastify 服務(wù)器發(fā)送和接收文件。
• 在 React Web 應(yīng)用程序上上傳、下載和顯示文件。
• 在 React Native (Expo) 移動(dòng)應(yīng)用上上傳、下載和顯示文件。

所有代碼和Postman集合都可以在我的GitHub上找到。

服務(wù)器

服務(wù)器在Fastify（Express.js 的現(xiàn)代化版本）上運(yùn)行。要啟動(dòng)應(yīng)用程序，請(qǐng)執(zhí)行以下操作：

1. 使用終端導(dǎo)航到 /server
2. 使用 npm install 安裝依賴(lài)項(xiàng)
3. 使用 npm run dev 運(yùn)行服務(wù)器

在 app.js 中，我們有三個(gè)關(guān)鍵端點(diǎn)：

- 下載端點(diǎn)（/download）

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);
});

此端點(diǎn)使用 createReadStream() 將 example.webp 作為流發(fā)送。包含 MIME 類(lèi)型，以便客戶(hù)端知道如何處理該文件。例如.webp，這將是image/webp。

？注意：MIME 類(lèi)型定義了正在發(fā)送的文件的格式。這有助于客戶(hù)端正確顯示它。
查看更多 MIME 類(lèi)型。

Content-Disposition 標(biāo)頭定義了如何將內(nèi)容呈現(xiàn)給客戶(hù)端。包括附件；文件名=;提示瀏覽器下載文件而不是內(nèi)聯(lián)顯示它。要直接顯示它，請(qǐng)使用內(nèi)聯(lián)而不是附件。
了解有關(guān)內(nèi)容處置的更多信息

- 使用表單數(shù)據(jù)上傳多個(gè)文件（/upload-multiples）

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 };
});

此端點(diǎn)接受多部分/表單數(shù)據(jù)請(qǐng)求。它：

1. 從請(qǐng)求中檢索文件。
2. 將每個(gè)文件轉(zhuǎn)換為緩沖區(qū)（二進(jìn)制數(shù)據(jù)的 JavaScript 表示）。
3. 將文件保存到 /upload 目錄。

例如，請(qǐng)求可能如下所示：

- 使用八位字節(jié)流上傳文件 (/upload-octet-stream)

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);
});

此端點(diǎn)期望請(qǐng)求正文中有一個(gè)二進(jìn)制文件（應(yīng)用程序/八位字節(jié)流）。與multipart/form-data不同的是，該文件已經(jīng)是二進(jìn)制數(shù)據(jù)了，所以我們可以直接將其寫(xiě)入磁盤(pán)。

請(qǐng)求在 Postman 中看起來(lái)像這樣：

網(wǎng)絡(luò)（反應(yīng)）

運(yùn)行應(yīng)用程序：

1. 使用終端導(dǎo)航到 /web
2. 使用 npm install 安裝依賴(lài)項(xiàng)
3. 使用 npm run dev 啟動(dòng)應(yīng)用程序

Web 應(yīng)用程序的所有功能都包含在 App.tsx 中：

這個(gè) React 應(yīng)用程序提供三個(gè)關(guān)鍵功能：

- 下載/顯示文件

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 };
});

當(dāng)用戶(hù)單擊“下載”按鈕時(shí)，應(yīng)用程序：

1. 調(diào)用 /download 端點(diǎn)。
2. 以二進(jìn)制 blob 形式接收文件。
3. 從 blob 創(chuàng)建一個(gè) objectURL，充當(dāng)瀏覽器可以訪(fǎng)問(wèn)的臨時(shí) URL。

行為取決于服務(wù)器返回的 Content-Disposition 標(biāo)頭：

• 如果 Content-Disposition 包含內(nèi)聯(lián)，則文件將顯示在新選項(xiàng)卡中。
• 如果包含附件，則會(huì)自動(dòng)下載該文件。

為了觸發(fā)下載，應(yīng)用程序會(huì)創(chuàng)建一個(gè)臨時(shí)的 ; href 設(shè)置為 objectURL 的元素并以編程方式單擊它，模擬用戶(hù)下載操作。

- 使用表單數(shù)據(jù)上傳文件

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 };
});

單擊“上傳文件”按鈕時(shí)：

1. uploadFile 函數(shù)運(yùn)行，創(chuàng)建一個(gè)隱藏的 元素并模擬用戶(hù)點(diǎn)擊。
2. 一旦用戶(hù)選擇一個(gè)或多個(gè)文件，這些文件就會(huì)附加到 FormData 對(duì)象。
3. 請(qǐng)求被發(fā)送到 /upload-multiples 端點(diǎn)，該端點(diǎn)通過(guò) multipart/form-data 接受文件。

這使得服務(wù)器能夠正確處理和保存上傳的文件。

- 使用八位字節(jié)流上傳文件

  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)單 - 只需將文件作為二進(jìn)制數(shù)據(jù)直接在請(qǐng)求正文中發(fā)送，并將文件名包含在請(qǐng)求標(biāo)頭中。

移動(dòng)（世博會(huì)）

您可以使用以下命令啟動(dòng)應(yīng)用程序：

1. 導(dǎo)航到終端中的移動(dòng)目錄。
2. 安裝依賴(lài)項(xiàng)：npm install
3. 使用 npm run android 或 npm run ios 運(yùn)行項(xiàng)目

主要邏輯位于 App.tsx 中，它呈現(xiàn)以下內(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);
});

要在新視圖中顯示文件（就像瀏覽器在新選項(xiàng)卡中打開(kāi)文件一樣），我們必須將響應(yīng)作為 blob 讀取，然后使用 FileReader 將其轉(zhuǎn)換為 base64。

我們將文件寫(xiě)入緩存目錄（只有應(yīng)用程序可以訪(fǎng)問(wèn)的私有目錄），然后使用 IntentLauncher 或共享（如果用戶(hù)使用 iOS）顯示它。

- 下載文件

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 進(jìn)程類(lèi)似，但我們必須使用 FileReader 將 blob 讀取為 base64，然后請(qǐng)求權(quán)限將文件下載到用戶(hù)想要保存文件的位置。

- 使用表單數(shù)據(jù)上傳文件

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 使用戶(hù)能夠選擇文件，然后使用 FormData 將所選文件附加到請(qǐng)求中。過(guò)程非常簡(jiǎn)單。

- 將文件上傳為八位字節(jié)流

  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ì)信息和內(nèi)容類(lèi)型設(shè)置標(biāo)頭，然后將文件添加到請(qǐng)求正文，就是這樣！

結(jié)論

如何在平臺(tái)之間查看、下載和上傳文件可能有點(diǎn)令人困惑，在這篇文章中我們看到了最常見(jiàn)的。

希望對(duì)您有幫助？

讓我在@twitter上

以上是React & Expo - 如何上傳和下載文件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！