template部分代码,引入upload组件,这里采用自动上传文件
<div class="filesC">
<el-upload
ref="files"
name="imgFile"
class="avatar-uploader"
:with-credentials="true"
:action="action"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
图片尺寸:141*54
</div>
script部分代码,图片上传之前触发 beforeAvatarUpload ,在这里return false 会中断上传操作
beforeAvatarUpload (file) {
let _this = this
if (file.type.indexOf('image')<0) {
this.$alert({message: '图片格式不正确', btn: false})
return false
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 141;
let height = 54;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
_this.$alert({message: '上传的icon必须是等于141*54!', btn: false})
return Promise.reject();
});
return isSize
},
handleAvatarSuccess (res, file) {
if (res.state==200) {
this.imageUrl = URL.createObjectURL(file.raw);//从文件中读取的本地文件路径,用于显示在img标签里
this.fileUrl = res.data//上传成功后,后台给返回的图片线上路径
}else{
this.$alert({message: '上传失败', btn: false})
}
},
handleAvatarError (res, file) {
this.$alert({message: '选择图片失败', btn: false})
/*this.imageUrl = URL.createObjectURL(file.raw);*/
},
css代码,修改原组件的样式
.filesC .avatar-uploader .el-upload {
border: 1px solid #aaa;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.filesC .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.filesC .avatar-uploader-icon {
font-size: 20px;
color: #8c939d;
width: 141px;
height: 54px;
line-height: 54px;
text-align: center;
background: white;
}
.filesC .avatar {
width: 141px;
height: 54px;
display: block;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)