How to Send Images with Vuetify's v-file-input
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
This article summarizes how to send images with Vuetify's v-file-input.
⇨ Click here for the table of contents for Vue articles
Conclusion
v-file-input is incredibly convenient and can simplify writing compared to a regular input tag.
Therefore, as long as you pay attention to that it doesn't behave like a regular input, you should be fine.
Specify v-model
<v-file-input
v-model="image"
></v-file-input>
<script>
export default {
data(){
return {
image: []
}
}
}
</script>Sending the Image
<script>
export default {
data() {
return {
image: [],
}
},
methods: {
post() {
// Sending the image with FormData
var formData = new FormData()
formData.append("image", this.image)
// Changing ContentType
const config = {
header: {
"Content-Type": "multipart/form-data",
},
}
// Sending with axios
axios
.post("post", formData, config)
.then(response => {})
.catch(error => {})
},
},
}
</script>Explanation
With v-input-file, you can easily pull file data using v-model without having to go through the process of getting the image input through @change.
With a regular input tag, it is not possible due to it being readonly
<input v-model="test" type="file" />This will result in an error.
Errors compiling template:
<input v-model="test" type="file">:
File inputs are read only. Use a v-on:change listener instead.Because it is read-only, it instructs to use @change instead.
Using a regular input
<input @change="imageInput" type="file" />data(){
return {
image: ''
}
},
methods: {
imageInput(e){
this.image = e.target.files[0]
}
}This is how it would be done.
Sending Multiple Images
Specify multiple
<v-file-input v-model="image" multiple></v-file-input>This allows you to select multiple images.
// Sending the number of images
let num = this.image.length
formData.append("number", num)
// Append for each image
for (let i = 0; i < num; i++) {
var name = "image" + i
formData.append(name, this.image[i])
}Based on this information, you can write a process on the server to save the images based on the number received.
Summary
That's all.
I've covered how to send images with v-file-input.
The last section on sending multiple images, I'm honestly not sure of the best method, but I hope it serves as a reference.
How to Save Images with Laravel + Vue + S3
If you have any complaints or corrections, please feel free to reach out to me via DM on Twitter.
That's all!
