Laravel 封装 ElementUI 上传组件,能够进行上传操作,但提交表单时获取不到上传信息。

表单就是普通的表单,然后我封装了ElementUI的上传组件:

<template>
    <div>
        <el-upload
            class="avatar-uploader"
            :name="name"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: '',
            };
        },
        props: {
            action:{
                type:String,
                default:''
            },
            name:{
                type:String,
                default:'thumb'
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isImage = file.type.indexOf('image') != -1
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isImage|!isLt2M) {
                    this.$message.error('请上传小于2Mb的图片');
                }
                return isImage && isLt2M;
            },
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

在表单中使用了封装的<upload></upload>组件进行上传处理,能够进行上传操作,也能显示预览图,但是上传以后提交form表单时却获取不到上传的任何信息(表单的其他信息能够正常获取)。如果将组件的自动上传属性设置为false,表单提交能获取到上传信息,但不能实时预览了,求助怎么能够在上传完成以后在提交表单时获取到上传信息,以方便写入到数据库当中?

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

如果你打算用原始的 form 提交那么为什么还要用这个组件呢?直接监听 input 的事件,将选择的图片转换为 base64,进行预览,提交表单时就正常了。

自动上传的话,unload 组件本身会使用 XHR 上传文件,上传文件后应该会清空所选文件,这就导致你说的后台无法获取上传文件。

如非必要,我建议将修改头像作为单独接口,upload 选择图片后自动上传,后端返回图片url,在 handleAvatarSuccess 方法中将后端响应的url 赋值给 imageUrl。当用户修改信息时,avatar 提交的只是已上传的头像的 URL 字符串而不是要上传的图片文件。

当然这么做需要额外维护图片上传和删除的逻辑,如用户上传了,多个图片,最终只用了最后一个,那么前几个图片删除的逻辑需要自己维护。

5年前 评论
GeorgeKing (作者) 5年前
讨论数量: 3

表单有个 enctype 你检查下看对不对。

5年前 评论
meitian (楼主) 5年前

如果你打算用原始的 form 提交那么为什么还要用这个组件呢?直接监听 input 的事件,将选择的图片转换为 base64,进行预览,提交表单时就正常了。

自动上传的话,unload 组件本身会使用 XHR 上传文件,上传文件后应该会清空所选文件,这就导致你说的后台无法获取上传文件。

如非必要,我建议将修改头像作为单独接口,upload 选择图片后自动上传,后端返回图片url,在 handleAvatarSuccess 方法中将后端响应的url 赋值给 imageUrl。当用户修改信息时,avatar 提交的只是已上传的头像的 URL 字符串而不是要上传的图片文件。

当然这么做需要额外维护图片上传和删除的逻辑,如用户上传了,多个图片,最终只用了最后一个,那么前几个图片删除的逻辑需要自己维护。

5年前 评论
GeorgeKing (作者) 5年前
Element-UI部分
<el-upload
    class="cover-uploader"
    :action="uploadAction"
    :headers="uploadHeader"
    :show-file-list="false"
    :on-success="handleCoverSuccess"
    :before-upload="beforeCoverUpload"
    style="display: inline-block;"
>
JS data部分
uploadAction: `${this.$store.state.url}/articles/upload`,
uploadHeader: {
    Authorization: localStorage.access_token
}
Laravel 部分
$request->file->store()
5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!