React & Expo - Cara Muat Naik & Muat Turun Fail

pengenalan

Saya bergelut untuk mencari contoh yang jelas tentang cara memuat naik dan memuat turun fail dalam apl mudah alih berasaskan Ekspo. Untuk membantu orang lain yang menghadapi cabaran yang sama—atau sesiapa sahaja yang ingin tahu—saya menulis siaran ini.

Sepanjang perjalanan, kami akan meneroka konsep utama yang berharga untuk difahami:

• Penimbal
• Penapis Niat
• Jenis MIME
• aplikasi/strim oktet
• berbilang bahagian/data-bentuk
• Dan banyak lagi...

Apa yang akan kami bincangkan:

• Menghantar dan menerima fail dengan pelayan Fastify.
• Memuat naik, memuat turun dan memaparkan fail pada apl web React.
• Memuat naik, memuat turun dan memaparkan fail pada apl mudah alih React Native (Ekspo).

Semua kod dan koleksi Posmen tersedia dalam GitHub saya.

Pelayan

Pelayan berjalan pada Fastify (versi Express.js yang dimodenkan). Untuk memulakan aplikasi lakukan fallowing:

1. Menggunakan terminal navigasi ke /server
2. Pasang kebergantungan dengan pemasangan npm
3. Jalankan pelayan menggunakan npm run dev

Dalam app.js kami mempunyai tiga titik akhir utama:

- Muat turun titik akhir (/muat turun)

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

Titik akhir ini menghantar example.webp sebagai strim menggunakan createReadStream(). Jenis MIME disertakan supaya pelanggan tahu cara mengendalikan fail. Contohnya.webp, ini akan menjadi imej/webp.

?Nota: Jenis MIME mentakrifkan format fail yang dihantar. Ini membantu pelanggan memaparkannya dengan betul.
Lihat lebih banyak jenis MIME.

Pengepala Kandungan-Pelupusan mentakrifkan cara kandungan harus dipersembahkan kepada pelanggan. Termasuk lampiran; nama fail= menggesa penyemak imbas untuk memuat turun fail daripada memaparkannya sebaris. Untuk memaparkannya secara langsung, gunakan sebaris dan bukannya lampiran.
Ketahui lebih lanjut tentang Content-Disposition

- Muat naik Berbilang fail menggunakan Data Borang (/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 };
});

Titik akhir ini menerima permintaan data berbilang bahagian/borang. Ia:

1. Mengambil semula fail daripada permintaan.
2. Menukar setiap fail kepada Penampan (perwakilan JavaScript bagi data binari).
3. Menyimpan fail ke direktori /upload.

Sebagai contoh, permintaan mungkin kelihatan seperti ini:

- Muat naik Fail menggunakan Strim Oktet (/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);
});

Titik akhir ini menjangkakan satu fail binari dalam badan permintaan (aplikasi/strim oktet). Tidak seperti data berbilang bahagian/bentuk, fail itu sudah pun menjadi data binari, jadi kami boleh menulisnya terus ke cakera.

Permintaan akan kelihatan seperti ini dalam Posmen:

Web (React)

Untuk menjalankan apl:

1. Menggunakan terminal navigasi ke /web
2. Pasang kebergantungan dengan pemasangan npm
3. Mulakan apl menggunakan npm run dev

Semua fungsi untuk aplikasi web terkandung dalam App.tsx:

Apl React ini menyediakan tiga ciri utama:

- Muat Turun/Paparkan Fail

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

Apabila pengguna mengklik butang "Muat Turun", apl:

1. Panggil titik akhir /muat turun.
2. Menerima fail sebagai gumpalan binari.
3. Mencipta objectURL daripada gumpalan, bertindak sebagai URL sementara yang boleh diakses oleh penyemak imbas.

Tingkah laku bergantung pada pengepala Content-Disposition yang dikembalikan oleh pelayan:

• Jika Pelupusan Kandungan termasuk sebaris, fail dipaparkan dalam tab baharu.
• Jika ia termasuk lampiran, fail itu dimuat turun secara automatik.

Untuk mencetuskan muat turun, apl mencipta sementara elemen dengan href ditetapkan ke objectURL dan mengkliknya secara pemrograman, mensimulasikan tindakan muat turun pengguna.

- Muat naik Fail menggunakan Data Borang

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

Apabila butang "Muat Naik Fail" diklik:

1. Fungsi uploadFile berjalan, mencipta elemen dan mensimulasikan klik pengguna.
2. Setelah pengguna memilih satu atau lebih fail, fail tersebut dilampirkan pada objek FormData.
3. Permintaan dihantar ke titik akhir /upload-multiples, yang menerima fail melalui multipart/form-data.

Ini membolehkan pelayan mengendalikan dan menyimpan fail yang dimuat naik dengan betul.

- Muat naik Fail menggunakan Strim Oktet

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

Pendekatan ini lebih mudah daripada menggunakan multipart/form-data—hanya hantar fail terus dalam badan permintaan sebagai data binari dan masukkan nama fail dalam pengepala permintaan.

Mudah Alih (Ekspo)

Anda boleh memulakan aplikasi dengan fallowing:

1. Navigasi ke direktori mudah alih dalam terminal anda.
2. Pasang kebergantungan: npm install
3. Jalankan projek dengan npm run android atau npm run ios

Logik utama adalah dalam App.tsx di mana ia menghasilkan fallowing:

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

Untuk memaparkan fail dalam paparan baharu (Seperti apabila penyemak imbas membuka fail dalam tab baharu) kita perlu membaca respons sebagai gumpalan dan kemudian mengubahnya menjadi base64 menggunakan FileReader.

Kami menulis fail dalam direktori cache (direktori peribadi yang hanya apl mempunyai akses) dan kemudian memaparkannya menggunakan IntentLauncher atau Sharing jika pengguna menggunakan iOS.

- Muat Turun Fail

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

Ini serupa dengan proses web tetapi kita perlu membaca gumpalan sebagai base64 menggunakan FileReader dan kemudian meminta kebenaran untuk memuat turun fail di mana pengguna ingin menyimpan fail.

- Muat naik Fail menggunakan Data Borang

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

Gunakan DocumentPicker untuk membolehkan pengguna memilih fail, kemudian gunakan FormData untuk menambahkan fail yang dipilih pada permintaan. Prosesnya sangat mudah.

- Muat naik Fail sebagai Strim Oktet

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

Memuat naik sebagai Application/octet-stream adalah lebih mudah daripada menggunakan FormData: tetapkan pengepala dengan butiran fail dan jenis kandungan, kemudian tambahkan fail pada badan permintaan dan itu sahaja!

Kesimpulan

Agak mengelirukan cara melihat, memuat turun dan memuat naik fail antara platform, dalam siaran ini kami melihat yang paling biasa.

Saya berharap dapat membantu anda ?

Fllow saya di @twitter

Atas ialah kandungan terperinci React & Expo - Cara Muat Naik & Muat Turun Fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!