element-ui实现图片上传功能（前台部分）

文章目录

前言

最近做的项目中需要实现图片上传功能，一开始也不懂，经过一段时间的学习后，终于实现了图片上传功能。我将分为前台与后台两部分与大家一起分享。这篇展示的是前台内容。

后台内容在这里

一、 template 部分

这里我使用的是用户头像上传的组件

<el-form-itemprop="logoUrl"label="企业头像":label-width="dialogFormLabelWidth"><el-uploadclass="avatar-uploader ":action="uploadImgUrl":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":on-error="handleUploadError":headers="headers"><imgv-if="ruleForm.logoUrl":src="ruleForm.logoUrl"class="avatar"><iv-elseclass="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>

若上传成功的话，会传给后台该图片的二进制文件。