el-upload图片上传

图片上传是开发中经常遇见的，今天记录一下
一、将el-upload组件引入到页面

		<el-upload
            :action="actionUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :limit="1"
            :on-exceed="handleExceed"
            :headers="headerToken"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="ruleForm.img" alt="" />
          </el-dialog>

属性
action ：上传的路径 ；
on-remove ：删除 ；
on-success ：成功 ；
before-upload ：上传之前；
on-preview 点击文件列表中已上传的文件时的钩子；
limit 最大允许上传个数；
on-exceed 文件超出个数限制时的钩子；
headers 设置上传的请求头部；
二、在data中

  data() {`在这里插入代码片`
    return {
      headerToken: {}, //图片上传携带的token
      ruleForm: {
        img: "", //图片路径
      },
      actionUrl: `${process.env.VUE_APP_BASE_API}/comm/file/upload`,
      dialogVisible: false,
    };
  },

三、在mounted钩子中获取token

 mounted() {
    this.headerToken = { token: this.$Cookie.get("token") };
  },

四、图片上传之前的逻辑

// 图片上传之前的
 beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      return isJPG && isLt5M;
    },
  // 上传成功
    handleSuccess(res, file) {
      // console.log(file, 12, res, 12);
      this.ruleForm.img = res.message;
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.ruleForm.img = "";
    },
    // 点击上传的图片列表
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    // 上传图片超出限制
    handleExceed(files, fileList) {
      this.$message.error("只能上传一张图片");
    },