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>
若上传成功的话,会传给后台该图片的二进制文件。