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,表单提交能获取到上传信息,但不能实时预览了,求助怎么能够在上传完成以后在提交表单时获取到上传信息,以方便写入到数据库当中?
推荐文章: