Ausgabe
Ich versuche, meine Video-Upload-Funktion vom Client auf den Server zu verschieben. Ich habe jedoch Probleme damit, die Videodatei in einem Formular an den Server zu übergeben.
Ich verwende “svelte-file-dropzone”, um die Datei abzurufen, einige Verarbeitungen werden durchgeführt und dann versuche ich, die Datei über ein verstecktes Dateieingabe-Tag wie folgt zu übermitteln:
<form action="?/upload" method="POST" enctype="multipart/form-data" use:enhance={handleSubmit} id="upload" name="upload">
<input hidden type="file" id="accepted-file" name="accepted-file" accept="video/*" bind:value={accepted}>
<div class="field">
<div class="control">
<button type="submit" class="button is-success is-fullwidth">Submit Video</button>
</div>
</div>
</form>
Wenn ich auf der Client-Seite den Wert “akzeptiert” logge, ist alles so, wie es sein sollte:
{
path: "test.mov"
lastModified: 1640425487561
lastModifiedDate: Sat Dec 25 2021 01:44:47 GMT-0800 (Pacific Standard
Time)
name: "test.mov"
size: 12458107
type: "video/quicktime"
webkitRelativePath: ""
}
… aber wenn ich versuche, auf die Datei auf dem Server zuzugreifen:
export const actions: Actions = {
async upload({ request }) {
const uploadFormData = await request.formData();
const accepted = uploadFormData.get('accepted-file') as File;
console.log("accepted file: ", accepted);
return { accepted };
}
}
…es gibt keine Datei, dh “accepted” ist leer.
Ich denke, dass das Problem etwas damit zu tun haben könnte, wie ich die Datei an die versteckte Eingabe anhänge, bin mir aber nicht sicher.
Es ist erwähnenswert, dass mein Code unter allen anderen Umständen funktioniert, er scheint nur in diesem Fall fehlzuschlagen. Ich habe viele Problemumgehungen ausprobiert, kann aber anscheinend nicht auf die Datei zugreifen, egal was ich versuche.
Ich habe mit diesen neuen SvelteKit-Änderungen zu kämpfen, und dies ist auch mein erster Versuch, TypeScript zu verwenden. Irgendwelche Gedanken oder Vorschläge würden sehr geschätzt, da ich derzeit völlig verloren bin. Vielen Dank für Ihre Zeit.
Lösung
Sie können eine Dateieingabe nicht einfach value
so setzen. Um Ihre Datei tatsächlich zu senden, müssen Sie die files
Liste der Dateieingabe ändern.
Z.B
<input type="file" name="accepted-file"
style:display="none"
use:setFile />
/** Svelte action to transfer the file to the input */
function setFile(input: HTMLInputElement) {
const data = new DataTransfer();
data.items.add(accepted); // Assuming that `accepted` is a File instance
input.files = data.files;
}
(Wenn die Eingabe immer vorhanden ist und nicht nur einmal erstellt wird, nachdem die Datei verarbeitet wurde, können Sie bind:this
anstelle einer Aktion verwenden, um eine Referenz auf die Eingabe zu erhalten, und dann aktualisieren files
, wo immer Sie die Verarbeitung durchführen. Sie könnten die Eingabe auch einschließen #key accepted
um seine Wiederherstellung zu erzwingen.)
Beantwortet von – HB
Antwort geprüft von – Mary Flores (FixError Volunteer)