React & Expo – So laden Sie Dateien hoch und herunterladen

Einführung

Es fiel mir schwer, klare Beispiele für das Hoch- und Herunterladen von Dateien in einer Expo-basierten mobilen App zu finden. Um anderen zu helfen, die vor der gleichen Herausforderung stehen – oder einfach nur Neugierigen –, habe ich diesen Beitrag geschrieben.

Unterwegs werden wir Schlüsselkonzepte erkunden, deren Verständnis wertvoll ist:

• Puffer
• Absichtsfilter
• MIME-Typen
• Anwendung/Oktett-Stream
• multipart/form-data
• Und mehr...

Was wir behandeln werden:

• Senden und Empfangen von Dateien mit einem Fastify-Server.
• Hochladen, Herunterladen und Anzeigen von Dateien in einer React-Web-App.
• Dateien hochladen, herunterladen und in einer mobilen React Native (Expo)-App anzeigen.

Der gesamte Code und die Postman-Sammlung sind in meinem GitHub verfügbar.

Server

Der Server läuft auf Fastify (einer modernisierten Version von Express.js). Um die App zu starten, gehen Sie wie folgt vor:

1. Navigieren Sie mit dem Terminal zu /server
2. Installieren Sie die Abhängigkeiten mit npm install
3. Führen Sie den Server mit npm run dev aus

In app.js haben wir drei wichtige Endpunkte:

- Endpunkt herunterladen (/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);
});

Dieser Endpunkt sendet example.webp als Stream mit createReadStream(). Der MIME-Typ ist enthalten, damit der Client weiß, wie er mit der Datei umgehen soll. Zum Beispiel.webp ist dies image/webp.

?Hinweis: Der MIME-Typ definiert das Format der gesendeten Datei. Dies hilft dem Client, es korrekt anzuzeigen.
Weitere MIME-Typen anzeigen.

Der Content-Disposition-Header definiert, wie der Inhalt dem Kunden präsentiert werden soll. Inklusive Anhang; Dateiname= fordert den Browser auf, die Datei herunterzuladen, anstatt sie inline anzuzeigen. Um es direkt anzuzeigen, verwenden Sie Inline statt Anhang.
Erfahren Sie mehr über Content-Disposition

- Laden Sie Multiples-Dateien mit Formulardaten hoch (/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 };
});

Dieser Endpunkt akzeptiert eine mehrteilige/Formulardatenanfrage. Es:

1. Ruft die Dateien aus der Anfrage ab.
2. Konvertiert jede Datei in einen Puffer (eine JavaScript-Darstellung von Binärdaten).
3. Speichert die Datei im Verzeichnis /upload.

Eine Anfrage könnte beispielsweise so aussehen:

- Hochladen von Dateien mit Octet Stream (/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);
});

Dieser Endpunkt erwartet eine einzelne Binärdatei im Anforderungstext (Anwendung/Oktett-Stream). Im Gegensatz zu Multipart/Form-Data handelt es sich bei der Datei bereits um Binärdaten, sodass wir sie direkt auf die Festplatte schreiben können.

Die Anfrage sieht in Postman in etwa so aus:

Web (Reagieren)

So führen Sie die App aus:

1. Navigieren Sie mit dem Terminal zu /web
2. Installieren Sie die Abhängigkeiten mit npm install
3. Starten Sie die App mit npm run dev

Alle Funktionen für die Webanwendung sind in App.tsx enthalten:

Diese React-App bietet drei Hauptfunktionen:

- Datei herunterladen/anzeigen

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

Wenn der Benutzer auf die Schaltfläche „Herunterladen“ klickt, wird die App:

1. Ruft den /download-Endpunkt auf.
2. Empfangt die Datei als binären Blob.
3. Erstellt eine Objekt-URL aus dem Blob, die als temporäre URL fungiert, auf die der Browser zugreifen kann.

Das Verhalten hängt vom vom Server zurückgegebenen Content-Disposition-Header ab:

• Wenn Content-Disposition Inline enthält, wird die Datei in einem neuen Tab angezeigt.
• Wenn ein Anhang enthalten ist, wird die Datei automatisch heruntergeladen.

Um den Download auszulösen, erstellt die App ein temporäres Element, wobei der href auf die Objekt-URL festgelegt ist, und klickt programmgesteuert darauf, wodurch eine Benutzer-Download-Aktion simuliert wird.

- Datei mit Formulardaten hochladen

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

Wenn auf die Schaltfläche „Datei hochladen“ geklickt wird:

1. Die Funktion „uploadFile“ wird ausgeführt und erstellt eine versteckte Element und Simulation eines Benutzerklicks.
2. Sobald der Benutzer eine oder mehrere Dateien auswählt, werden diese Dateien an ein FormData-Objekt angehängt.
3. Die Anfrage wird an den Endpunkt /upload-multiples gesendet, der Dateien über multipart/form-data akzeptiert.

Dadurch kann der Server die hochgeladenen Dateien ordnungsgemäß verarbeiten und speichern.

- Laden Sie Dateien mit Octet Stream hoch

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

Dieser Ansatz ist einfacher als die Verwendung von Multipart-/Formulardaten – senden Sie die Datei einfach direkt im Anforderungstext als Binärdaten und fügen Sie den Dateinamen in die Anforderungsheader ein.

Mobil (Messe)

Sie können die App wie folgt starten:

1. Navigieren Sie zum mobilen Verzeichnis in Ihrem Terminal.
2. Installieren Sie die Abhängigkeiten: npm install
3. Führen Sie das Projekt mit npm run android oder npm run ios aus

Die Hauptlogik befindet sich in App.tsx, wo Folgendes gerendert wird:

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

Um die Datei in einer neuen Ansicht anzuzeigen (z. B. wenn der Browser die Datei in einem neuen Tab öffnet), müssen wir die Antwort als Blob lesen und sie dann mit FileReader in Base64 umwandeln.

Wir schreiben die Datei in das Cache-Verzeichnis (ein privates Verzeichnis, auf das nur die App Zugriff hat) und zeigen sie dann mit IntentLauncher oder Sharing an, wenn der Benutzer iOS verwendet.

- Datei herunterladen

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

Dies ähnelt dem Webprozess, aber wir müssen den Blob mit FileReader als Base64 lesen und dann um Erlaubnis bitten, die Datei dort herunterzuladen, wo der Benutzer sie speichern möchte.

- Datei mit Formulardaten hochladen

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

Verwenden Sie DocumentPicker, um Benutzern die Auswahl von Dateien zu ermöglichen, und verwenden Sie dann FormData, um die ausgewählten Dateien an die Anfrage anzuhängen. Der Vorgang ist sehr unkompliziert.

- Datei als Oktett-Stream hochladen

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

Das Hochladen als Anwendung/Oktett-Stream ist noch einfacher als die Verwendung von FormData: Legen Sie die Header mit den Dateidetails und dem Inhaltstyp fest, fügen Sie dann die Datei zum Anforderungstext hinzu und fertig!

Abschluss

Es kann etwas verwirrend sein, wie man Dateien zwischen Plattformen anzeigt, herunterlädt und hochlädt. In diesen Beiträgen haben wir die häufigsten gesehen.

Ich hoffe, Ihnen geholfen zu haben?

Fallow me on @twitter

Das obige ist der detaillierte Inhalt vonReact & Expo – So laden Sie Dateien hoch und herunterladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!