How to upload a file from vue.js frontend to fastapi backend?
How to upload a file from vue.js frontend to fastapi backend?
1 answer
by
lizzie ,
2 months ago
@shyann
To upload a file from a Vue.js frontend to a FastAPI backend, you can use the FormData object in JavaScript to create a form data object and send it as a POST request to the FastAPI backend.
Here's a step-by-step guide on how to achieve this:
- Create a form in your Vue.js component to allow users to select a file for upload:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileUpload">
<button @click="uploadFile">Upload File</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
const formData = new FormData();
formData.append('file', this.file);
// Make a POST request to your FastAPI backend with the FormData object
// You can use Axios or fetch API to make the request here
}
}
}
</script>
|
- Configure the POST request in the uploadFile method to send the FormData object to your FastAPI backend:
Using Axios:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import axios from 'axios';
uploadFile() {
const formData = new FormData();
formData.append('file', this.file);
axios.post('http://your-fastapi-backend-url/upload', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
|
Using fetch API:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
uploadFile() {
const formData = new FormData();
formData.append('file', this.file);
fetch('http://your-fastapi-backend-url/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
}
|
- In your FastAPI backend, create a route handler to receive the file upload:
1 2 3 4 5 6 7 8 9 |
from fastapi import FastAPI, File, UploadFile
from fastapi.responses import JSONResponse
app = FastAPI()
@app.post("/upload")
async def upload_file(file: UploadFile = File(...)):
# Process the uploaded file here
return JSONResponse(content={"message": "File uploaded successfully"})
|
With these steps, you can upload a file from your Vue.js frontend to your FastAPI backend. Make sure to handle file uploads properly in your backend to store or process the uploaded file as needed.