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