上传按钮upload上传组件

1.上传组件

components>upload>index.vue

<template>
  <div>
    <el-upload
      :action="$uploadAction()"
      accept="image/jpeg,image/jpg,image/png"
      list-type="picture-card"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
      :limit="limit"
      :show-file-list="false"
    >
      <el-image v-if="src" :src="src" class="upload-image"></el-image>
      <i slot="default" class="el-icon-plus" v-else></i>
      <span slot="tip" class="el-upload__tip note" v-if="showTip">
        {{ tip }}
      </span>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "Upload",
  data() {
    return {};
  },
  props: {
    src: String,
    limitSize: {
      type: Number,
      default: 200,
    },
    limit: {
      type: Number,
      default: 2,
    },
    showTip: {
      type: Boolean,
      default: true,
    },
    tip: {
      type: String,
      default:
        "* 注:图片尺寸为:401*401px，图片格式为jpg，jpeg，png，大小不建议超过200k",
    },
  },
  computed: {},
  methods: {
    handleBeforeUpload(file) {
      if (file.size / 1024 > this.limitSize) {
        this.$message.error(`上传机台图片大小不能超过 ${this.limitSize} K!`);
        return false;
      }
      return true;
    },

    handleSuccess(res) {
      this.$emit("update:src", res.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-image {
  width: 100%;
  height: 100%;
  .el-image__inner {
    background-size: cover;
  }
}
::v-deep.el-upload__tip{
  position: absolute;
  bottom: 0;
  margin-left: 10px;
}
</style>

2.使用组件

（题外话，这个精准到每一行的提交记录提示是安装了GitLens拓展）