Javascript 如何将文件从Vue前端上载到FastAPI后端
Vuejs代码Javascript 如何将文件从Vue前端上载到FastAPI后端,javascript,python,vue.js,http,fastapi,Javascript,Python,Vue.js,Http,Fastapi,Vuejs代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="file-upload-list" class="container">
<div class="large-12 medium-12 small-12 cell">
<label>File
<input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
</label>
<button v-on:click="submitFile()">Submit</button>
</div>
</div>
<script>
var fileList = new Vue({
data(){
return {
file: ''
}
},
el: "#file-upload-list",
methods: {
/*
Submits the file to the server
*/
submitFile(){
/*
Initialize the form data
*/
let formData = new FormData();
/*
Add the form data we need to submit
*/
formData.append('file', this.file);
console.log(this.file);
var baseURL="http://127.0.0.1:8000"
/*
Make the request to the POST /single-file URL
*/
axios.post( baseURL+'/uploadfiles',
// formData,
{
headers: {
'Content-Type': 'multipart/form-data'
},
file:this.file
}
).then(function(){
console.log('SUCCESS!!');
})
.catch(function(){
console.log('FAILURE!!');
});
console.log(formData);
},
/*
Handles a change on the file upload
*/
handleFileUpload(){
this.file = this.$refs.file.files[0];
}
}
});
</script>
</body>
</html>
我正在尝试将一个pdf文件从vuejs上载到fastAPI。其中pdf文件将保存在提到的fastAPI代码中的特定位置。我已经在postman中测试了fastapi代码,它运行良好,我还启用了跨源代码。我是vuejs新手,不知道如何实现表单操作功能。我主要需要知道HTTPFile事务正在vuejs中发生
要使用Axios上载文件,请使用
Axios.post(`${baseURL}/uploadfiles`,formData)
。就这样,没有额外的标题required@Phil谢谢你帮我。事实上,我发现了问题所在。这是一个简单的错误,我做了formData.append('files',this.file);我把文件改成了hi@KarthickAravindan!你能发布整个解决方案或编辑你的问题吗?我也有同样的问题。谢谢查看此链接以了解完整的演练。要使用Axios上载文件,请使用Axios.post(`${baseURL}/uploadfiles`,formData)
。就这样,没有额外的标题required@Phil谢谢你帮我。事实上,我发现了问题所在。这是一个简单的错误,我做了formData.append('files',this.file);我把文件改成了hi@KarthickAravindan!你能发布整个解决方案或编辑你的问题吗?我也有同样的问题。谢谢检查此链接以获得完整的漫游
@app.post("/uploadfiles/")
async def create_upload_files(files: List[UploadFile] = File(...)):
result=""
for file in files:
fpath = os.path.join(
STORAGE_PATH, f'{file.filename}'
)
async with aiofiles.open(fpath, 'wb') as f:
content = await file.read()
await f.write(content)
return {"message": "success"}