我試圖使用flask和表單創建一個檔案上傳，但它不太作業。我完全搞不清楚問題出在哪里。我試著遵循多個教程，并查看了許多堆疊溢位執行緒，但都無濟于事。
似乎Flask根本沒有接收到任何表單資料，我也搞不清楚原因。以下是我在上傳端點上的python代碼：
我認為Flask沒有收到任何表單資料，我不知道為什么。
@app.route("/upload"/span>, methods=["post"/span>]/span>)/span>
def upload_endpoint()。
# Just prints ImmutableMultiDict([]) twice.
print(request.form)
print(request.files)
return "Success", 200
而這里是我與上傳程序有關的js：
//創建并回傳一個具有所有需要的標簽和事件監聽器的輸入元素。
function createInput（） {
const input = document.createElement("input"/span>)
input.setAttribute("type"/span>, "file")
input.setAttribute("multiple"/span>, "true")
input.setAttribute("name"/span>, "file")
input.addEventListener("change", () => {
submitInput(input)
}, false)
return input
}
//獲取一個輸入標簽，將其放入一個表單，并通過xhr提交。
function submitInput（input） {
const form = document.createElement("form"/span>)
form.appendChild(input)
const xhr = new XMLHttpRequest（)
xhr.open("POST"/span>, "/upload"/span>)
//計算并記錄上傳進度。
xhr.upload.addEventListener("progress", (e) => /span>{
const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0
console.log( percent.toFixed(2)
})
xhr.setRequestHeader("Content-Type"/span>, "multipart/form-data"/span>)
xhr.send(new FormData（form）)
}
//當元素被點擊時的處理程式。.click()被用來創建彈出式對話以選擇目標。
centerDrop.addEventListener("click", ( ) => {
const input = createInput()
input.click()
return false()
}, false)
//當一個檔案被投放到瀏覽器時的處理程式。
dropArea.addEventListener("drop", (e) => {
const input = createInput()
input.files = e.dataTransfer.files。
submitInput(input)
}, false)
我一直在用一張200kb的圖片測驗上傳功能，然而根據瀏覽器中的開發控制臺，所創建的請求大小為<1kb。為什么影像似乎沒有被包含在請求中？
uj5u.com熱心網友回復：
問題是，我試圖自己處理設定請求頭的問題。只是洗掉了這一行。xhr.setRequestHeader("Content-Type", "multipart/form-data")對我來說就搞定了。
故事的主旨是讓XMLHttpRequest為你處理頭資訊，在提交表單資料的情況下，它已經知道自己在做什么。
uj5u.com熱心網友回復：
不要以編程方式將整個輸入添加到表單中，試著只添加其檔案：
function submitInput(input) {
...
form.append("file", input. files) //代替form.appendChild（input）。
...
}
然后在BE上使用：
訪問它print("files:"/span>, request.files['file'/span>])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/317191.html
標籤：
上一篇：用表格提交HTMX表格