<template>
<div>
<el-upload
class="avatar-uploader"
action="http://huruqing.cn:3001/admin/book/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="formData.poster" :src="formData.poster" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
props: ["formData"],
data() {
return {
poster: ""
};
},
methods: {
handleAvatarSuccess(res, file) {
this.poster = URL.createObjectURL(file.raw);
//获取海报的路径
const posters = file.response.result.url;
//传给后台数据字段
this.formData.poster = posters;
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
}
}
};
</script>
<style lang="scss">
.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: 138px;
height: 138px;
line-height: 138px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
element upload 图片上传
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最近要做一个上传文件到七牛的功能，没看官方文档之前认为蛮简单的，看完之后就蒙比了。太乱了吧，也许是搞的太晚了，没心...
- 编码都是以需求为导向的，所以编码前一定要弄清楚需要的结果是什么，然后再开始编码。 现在简单的说下需求：如下图所示，...
- 平时项目里遇到上传图片的功能还挺多的，但是很长一段时间不接触，也会忘记，做个笔记多记一笔，也方便日后的使用 上传的...
- 最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传...
