文章目录
- 前言
- 一、 template 部分
- 二、script部分
- 1、导入token
- 2、在data中注册以下
- 3、method中的方法
- 4、style
前言
最近做的项目中需要实现图片上传功能，一开始也不懂，经过一段时间的学习后，终于实现了图片上传功能。我将分为前台与后台两部分与大家一起分享。这篇展示的是前台内容。
后台内容在这里
一、 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>若上传成功的话，会传给后台该图片的二进制文件。