element上传图片到服务器（element-ui实现图片上传功能（前台部分））
导读：前言 最近做的项目中需要实现图片上传功能，一开始也不懂，经过一段时间的学习后，终于实现了图片上传功能。我将分为前台与后台两部分与大家一起分享。这篇展示的是前台内容。...
前言
最近做的项目中需要实现图片上传功能 ，一开始也不懂 ，经过一段时间的学习后 ，终于实现了图片上传功能 。我将分为前台与后台两部分与大家一起分享 。这篇展示的是前台内容 。
后台内容在这里
一 、 template 部分
这里我使用的是用户头像上传的组件
<el-form-item prop="logoUrl" label="企业头像" :label-width="dialogFormLabelWidth"> <el-upload class="avatar-uploader " :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="handleUploadError" :headers="headers"> <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>1.参数说明
action ：上传图片的后台controller的地址
show-file-list：是否显示已上传文件列表
on-success：文件上传成功时的钩子
before-upload ：上传文件之前的钩子 ，参数为上传的文件 ，若返回 false 或者返回 Promise 且被 reject ，则停止上传 。
on-error：文件上传失败时的钩子
headers：上传图片的请求头部二 、script部分
1 、导入token
getToken函数定义在了auth.js模块中：
export：用于向其余模块提供代码 。2 、在data中注册以下
ruleForm:{ logoUrl:"",//logo }, headers: { Authorization: "Bearer " + getToken(), }, uploadImgUrl: "/v1/enterprise/upload", // 上传图片的后台controller的地址 dialogFormLabelWidth: 120px,3 、method中的方法
handleAvatarSuccess(res) { this.ruleForm.logoUrl=res.data.url; this.$message({ message: 图片上传成功, type: success }); beforeAvatarUpload() { const isJPG = file.type === image/jpeg; const isLt20M = file.size / 1024 / 1024 < 20; if (!isJPG) { this.$message.error(上传头像图片只能是 JPG 格式!); } if (!isLt20M) { this.$message.error(上传头像图片大小不能超过 20MB!); } return isJPG && isLt20M; }, handleUploadError() { this.$message({ type: "error", message: "上传失败", }); },4 、style
<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>若上传成功的话 ，会传给后台该图片的二进制文件 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！