使用vue.js和Element ui在Laravel中上传和保存图像的正确方法

我正在制作一本食谱书，我希望食谱可以选择上传图片，我在这个项目中使用元素UI，它们有一个。然而，我不知道如何正确使用它。我是基于我找到的一些代码，但它实际上不起作用。我在控制器中收到的$request总是带有

图像：null

。我正在使用

$intertia.post

，但如果需要，我可以更改为

$http.post

这就是我正在尝试的

<el-upload
    class="avatar-uploader"
    action="/api/vendors/fake-upload"
    accept="image/*"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="form.image" :src="form.image" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>

    <div class="buttonImage">
        <el-button v-if="form.image" class="img-button mt-1" type="warning">
            Change Picture
        </el-button>
    </div>
</el-upload>

这些是

---

正确的方法是什么，或者有更简单的方法吗？

我看到您的状态中有

form.image

和

imageFile

imageFile

看起来一点也不受触动，但它是正在发布的文件。也许可以尝试将发布的图像设置为：

image:this.form.image

@chunterb我忘记添加2个方法，请参阅我的更新

loadingImage: false,
imageFile: null,
form: {
    name: '',
    description: '',
    image: ''
},

handleAvatarSuccess(res, file) {
    this.form.image = URL.createObjectURL(file.raw);
    this.loadingImage = false;
},
beforeAvatarUpload(file) {
    this.imageFile = file;

    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        this.$message.error('This picture must be a JPG!');
    }
    if (!isLt2M) {
        this.$message.error('This image is bigger than 2MB!');
    }

    this.loadingImage = true;
    return isLt2M && isJPG;
},

submit() {
    this.$refs.form.validate((valid) => {
        if (valid) {
            this.loading = true;
            if (!this.form.id) {
                this.$inertia.post(this.baseUrl, {
                    name: this.form.name,
                    description: this.form.description,
                    category: this.category,
                    steps: this.steps,
                    ingredient: this.ingredient,
                    measurements: this.measurements,
                    image: this.imageFile
                }).then(
                    () => {
                        this.recipe = this.$page.recipe;
                        this.$message({
                            type: 'success',
                            message: 'Created correctly.'
                        });
                        this.loading = false
                    },
                    (res) => {
                        this.$message.error(parseError(res)[0]);
                        this.loading = false;
                    })
            } 
        } else {
            return false;
        }
        this.reset();
    });
},