我正在嘗試將我的提交視頻上傳功能從客戶端移動到服務器。但是，我正在努力將視頻檔案以一種形式傳遞給服務器。
我正在使用“svelte-file-dropzone”來檢索檔案，完成了一些處理，然后我嘗試通過隱藏檔案輸入標簽提交檔案，如下所示：
<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>
當我在客戶端控制臺記錄“接受”值時，一切都應該是：
{
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: ""
}
...但是當我嘗試訪問服務器上的檔案時：
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 };
}
}
...沒有檔案，即“已接受”為空白。
我認為問題可能與我如何將檔案附加到隱藏輸入有關，但不太確定。
值得注意的是，我的代碼在所有其他情況下都有效，只是在這種情況下似乎失敗了。我嘗試了許多解決方法，但無論我嘗試什么似乎都無法訪問該檔案。
我一直在為這些新的 SvelteKit 更改而苦苦掙扎，這也是我第一次嘗試使用 TypeScript。任何想法或建議將不勝感激，因為我目前完全迷路了。感謝您的時間。
uj5u.com熱心網友回復：
您不能value像這樣簡單地設定檔案輸入。要實際發送您的檔案，您必須修改files檔案輸入的串列。
例如
<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;
}
（如果輸入始終存在并且不僅在處理檔案后創建一次，您可以使用bind:this而不是操作來獲取對輸入的參考，然后更新files您進行處理的任何位置。您也可以將輸入包裝在#key accepted強制其重新生成。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511792.html
標籤：形式文件视频服务器苗条的