@msslgomez you need to pass FormData object to $inertia.post(): https://github.com/inertiajs/inertia-vue/issues/48#issuecomment-496808637
Feb 18, 2020
2
Level 9
How to upload image to database, vue.js and element-ui
I'm trying to upload an image from the user to the database, but it always sends the image as null, this is the code in the vue.js
<el-row style="text-align: center">
<el-divider></el-divider>
<el-upload
class="avatar-uploader"
action="/api/question/upload-image"
accept="image/*"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
{{form.file}}
{{form.imageUrl}}
</el-row>
The output for the {{form.file}} => [object File]
The output for the {{form.imageUrl}} => blob:http://dev.un.com/026787df-ce52-413a-8493-dc4516ff12e1
This is the code to submit
let data = Object.assign({}, this.form);
this.$refs.form.validate((valid) => {
if (valid) {
if (!this.form.id) {
this.$inertia.post(this.baseUrl, data).then(
() => {
this.survey_question = this.$page.survey_question;
this.$message({
type: 'success',
message: 'Creado correctamente.'
});
this.loading = false
},
(res) => {
this.$message.error(parseError(res)[0]);
this.loading = false;
})
} else {
this.$inertia.post(this.customUpdateUrl + '/' + this.form.id, data).then(
() => {
this.survey_question = this.$page.survey_question;
this.$message({
type: 'success',
message: 'Guardado correctamente..'
});
},
(res) => {
this.$message.error(parseError(res)[0]);
this.loading = false;
})
}
} else {
return false;
}
this.reset();
});
If i console.log(data) this is the output for file and imageUrl
file: File {uid: 1582035595385, name: "Annotation 2020-01-31 092408.jpg", lastModified: 1580484251142, lastModifiedDate: Fri Jan 31 2020 09:24:11 GMT-0600 (Central Standard Time), webkitRelativePath: "", …}
imageUrl: "blob:http://dev.un.com/88e294a5-a09d-4a67-a31f-49e9876feb3b"
This is in the relevant info in form in the data()
form: {
file: null,
imageUrl: '',
},
This is how I'm trying to save it in the controller
$destino = 'img/questions';
$image = $request->file('file');
if ($image) {
$image = $request->file('file');
$filename = Uuid::generate(4)->string . '.' . $image->getClientOriginalExtension();
$image->move($destino, $filename);
$preg->image = $destino . '/' . $filename;
}
I also did php artisan storage:link but the image is still null in the database
What am I doing wrong?
Please or to participate in this conversation.