客戶端代碼：
!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<form id="uploadForm" role="form" method="post" enctype=multipart/form-data>
<input type="file" id="file" name="file" multiple>
<input type=button value=Upload onclick="uploadFile()">
</form>
<script type="text/javascript">
function uploadFile() {
var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("images", imagefile.files);
axios.post('http://127.0.0.1:8000/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
</script>
</body>
</html>
服務器代碼：
from fastapi import FastAPI, File, UploadFile, FastAPI
from typing import Optional, List
from fastapi.responses import FileResponse, HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
...
def save_file(filename, data):
with open(filename, 'wb') as f:
f.write(data)
print('file saved')
@app.post("/upload")
async def upload(files: List[UploadFile] = File(...)):
print(files)
for file in files:
contents = await file.read()
save_file(file.filename, contents)
print('file received')
return {"Uploaded Filenames": [file.filename for file in files]}
我收到以下錯誤：
←[32mINFO←[0m: 127.0.0.1:10406 - "←[1mPOST /upload HTTP/1.1←[0m" ←[31m400 Bad Request←[0m
我嘗試通過表單操作上傳單個檔案，一切正常，但我需要上傳兩個檔案。
uj5u.com熱心網友回復：
首先，在上傳檔案或表單資料時，應使用在其端點/路由中定義的相同表單鍵。在您的情況下，即files. 因此，在客戶端，您應該使用該密鑰而不是images.
其次，上傳多個檔案的方法是回圈遍歷檔案陣列（即imagefile.files在您的代碼中）并將每個檔案添加到FormData物件中。
第三，錯誤似乎是由于0.27.1Axios 版本中的一些錯誤/更改而發生的。這是GitHub 上最近的一個相關問題。在這里0.27.2使用來自 cdnjs的最新版本，即 ，可以解決該問題。
或者，您可以使用Fetch API，類似于此答案（您可以按照以下 Axios 示例中所示的相同方式添加檔案串列）。在 Fetch API 中，當將檔案上傳到服務器時，您不應明確設定Content-Type請求的標頭，如此處所述。
使用 Axios 的作業示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Files</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" multiple><br>
<input type="button" value="Upload" onclick="uploadFile()">
<script type="text/javascript">
function uploadFile() {
var fileInput = document.querySelector('#fileInput');
if (fileInput.files[0]) {
var formData = new FormData();
for (const file of fileInput.files)
formData.append('files', file);
axios({
method: 'post',
url: '/upload',
data: formData,
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
}
})
.then(function(response) {
console.log(response);
})
.catch(function(response) {
console.log(response);
});
}
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/465905.html