介紹

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

在這個(gè)過(guò)程中，我們將探索有助於理解的關(guān)鍵概念：

• 緩衝區(qū)
• 意圖過(guò)濾器
• MIME 類型
• 應(yīng)用程式/八位元位元組流
• 多部分/表單資料
• 還有更多...

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

• 使用 Fastify 伺服器傳送和接收檔案。
• 在 React Web 應(yīng)用程式上傳、下載和顯示檔案。
• 在 React Native (Expo) 行動(dòng)應(yīng)用程式上傳、下載和顯示檔案。

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

伺服器

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

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

在 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 傳送為流。包含 MIME 類型，以便用戶端知道如何處理該檔案。例如.webp，這將是image/webp。

？注意：MIME 類型定義了正在傳送的文件的格式。這有助於客戶端正確顯示它。
查看更多 MIME 類型。

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

- 使用表單資料上傳多個(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)接受多部分/表單資料請(qǐng)求。它：

1. 從請(qǐng)求中檢索文件。
2. 將每個(gè)檔案轉(zhuǎn)換為緩衝區(qū)（二進(jìn)位資料的 JavaScript 表示）。
3. 將檔案儲(chǔ)存到 /upload 目錄。

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

- 使用八位元組流上傳檔案 (/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)用程式/八位元組流）。與multipart/form-data不同的是，該檔案已經(jīng)是二進(jìn)位資料了，所以我們可以直接將其寫入磁碟。

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

網(wǎng)路（反應(yīng)）

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

1. 使用終端導(dǎo)航到 /web
2. 使用 npm install 安裝依賴項(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)使用者點(diǎn)擊「下載」按鈕時(shí)，應(yīng)用程式：

1. 呼叫 /download 端點(diǎn)。
2. 以二進(jìn)位 blob 形式接收檔案。
3. 從 blob 建立一個(gè) objectURL，充當(dāng)瀏覽器可以存取的臨時(shí) URL。

行為取決於伺服器傳回的 Content-Disposition 標(biāo)頭：

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

為了觸發(fā)下載，應(yīng)用程式會(huì)建立一個(gè)臨時(shí)的 ; href 設(shè)定為 objectURL 的元素並以程式設(shè)計(jì)方式點(diǎn)擊它，模擬使用者下載操作。

- 使用表單資料上傳文件

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

點(diǎn)選「上傳檔案」按鈕時(shí)：

1. uploadFile 函數(shù)運(yùn)行，建立一個(gè)隱藏的 元素並模擬使用者點(diǎn)擊。
2. 一旦使用者選擇一個(gè)或多個(gè)文件，這些文件就會(huì)附加到 FormData 物件。
3. 請(qǐng)求被傳送到 /upload-multiples 端點(diǎn)，該端點(diǎn)透過(guò) multipart/form-data 接受檔案。

這使得伺服器能夠正確處理和保存上傳的檔案。

- 使用八位元組流上傳文件

  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)位資料直接在請(qǐng)求正文中發(fā)送，並將檔案名稱包含在請(qǐng)求標(biāo)頭中。

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

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

1. 導(dǎo)航到終端中的移動(dòng)目錄。
2. 安裝依賴項(xiàng)：npm install
3. 使用 npm run android 或 npm run ios 來(lái)執(zhí)行項(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);
});

要在新視圖中顯示檔案（就像瀏覽器在新分頁(yè)中開(kāi)啟檔案一樣），我們必須將回應(yīng)作為 blob 讀取，然後使用 FileReader 將其轉(zhuǎn)換為 base64。

我們將檔案寫入快取目錄（只有應(yīng)用程式可以存取的私有目錄），然後使用 IntentLauncher 或共用（如果使用者使用 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)程類似，但我們必須使用 FileReader 將 blob 讀取為 base64，然後請(qǐng)求權(quán)限將檔案下載到使用者想要儲(chǔ)存檔案的位置。

- 使用表單資料上傳文件

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 將所選文件附加到請(qǐng)求中。過(guò)程非常簡(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ì)資訊和內(nè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)文章！