eggplantSword's avatar

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?

0 likes
2 replies
eggplantSword's avatar

@sti3bas Thanks I ended up figuring it out before your comment, and I did end up using let data = Converter.objectToFormData(this.form);

Please or to participate in this conversation.