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:
Was wir behandeln werden:
Der gesamte Code und die Postman-Sammlung sind in meinem GitHub verfügbar.
Der Server läuft auf Fastify (einer modernisierten Version von Express.js). Um die App zu starten, gehen Sie wie folgt vor:
In app.js haben wir drei wichtige Endpunkte:
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=
Erfahren Sie mehr über Content-Disposition
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:
Eine Anfrage könnte beispielsweise so aussehen:
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:
So führen Sie die App aus:
Alle Funktionen für die Webanwendung sind in App.tsx enthalten:
Diese React-App bietet drei Hauptfunktionen:
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:
Das Verhalten hängt vom vom Server zurückgegebenen Content-Disposition-Header ab:
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.
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:
Dadurch kann der Server die hochgeladenen Dateien ordnungsgemäß verarbeiten und speichern.
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.
Sie können die App wie folgt starten:
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.
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.
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.
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!
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!
Welche Währung ist PROM?
Was soll ich tun, wenn der USB-Datenträger auf dem Computer nicht gelesen werden kann?
Was ist mit dem roten Licht am Lichtsignal los?
Verwendung der ubound-Funktion
Worauf bezieht sich Bean in Java?
So öffnen Sie eine URL-Datei
So stellen Sie eine Verbindung zum LAN her
So stellen Sie eine Verbindung zum Zugriff auf die Datenbank in VB her
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
