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，表单提交能获取到上传信息，但不能实时预览了，求助怎么能够在上传完成以后在提交表单时获取到上传信息，以方便写入到数据库当中？
关于 LearnKu
粤公网安备 44030502004330号
如果你打算用原始的 form 提交那么为什么还要用这个组件呢？直接监听 input 的事件，将选择的图片转换为 base64，进行预览，提交表单时就正常了。
自动上传的话，unload 组件本身会使用 XHR 上传文件，上传文件后应该会清空所选文件，这就导致你说的后台无法获取上传文件。
如非必要，我建议将修改头像作为单独接口，upload 选择图片后自动上传，后端返回图片url，在 handleAvatarSuccess 方法中将后端响应的url 赋值给 imageUrl。当用户修改信息时，avatar 提交的只是已上传的头像的 URL 字符串而不是要上传的图片文件。
当然这么做需要额外维护图片上传和删除的逻辑，如用户上传了，多个图片，最终只用了最后一个，那么前几个图片删除的逻辑需要自己维护。