- 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!