上传图片组件示例

话不多说，直接上代码
组件uploadImg.vue放在components下，代码如下

<template>
  <div v-loading="uploadingImgLoading" class="pic_container">
    <input
      ref="nativeInput"
      type="file"
      style="display: none"
      accept="image.png,image.gif"
      @change="verificationPicFile"
    />
    <div class="avatar-uploader">
      <img
        @click="chooseFile"
        v-if="isShowImage"
        :src="imageUrl"
        class="avatar avatar_box club_hover_ponter"/>
      <div
        v-if="!isShowImage"
        @click="chooseFile"
        class="avatar-uploader-icon club_hover_ponter">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
      <div class="updata_img_pic_txt" v-if="!isShowImage">上传图片</div>
      <p class="pic-note">文件大小不超过1M <br />支持jpg、jpeg、png、gif、bmp格式</p>
    </div>
  </div>
</template>
<script>
import { uploadFile, downImg } from "@/api/index";
export default {
  name: "ImportImg",
  props: {
    getImgData: {
      type: Object,
      default() {
        return {
          imageUrl: "",
          isShowImage: false,
        };
      },
    },
  },
  data() {
    return {
      setTimer: null,
      imgKey: "",
      imageUrl: "",
      picFileName: "",
      importImgReturn: {},
      timer: null,
      fileList: [],
      isShowImage: false,
      uploadingImgLoading: false,
    };
  },
  watch: {
    getImgData: {
      handler: function (val) {
        console.log(val);
      },
      deep: true,
    },
  },
  methods: {
    importImgClick() {
      const vm = this;
      vm.chooseFile();
    },
    verificationPicFile(event) {
      const vm = this;
      vm.fileList = Array.from(event.target.files);
      var fileSize = 0;
      var fileMaxSize = 1024; //1M
      var filePath = event.target.files;
      if (filePath) {
        fileSize = event.target.files[0].size;
        var size = fileSize / 1024;
        if (size > fileMaxSize) {
          vm.$message({ message: "文件大小不能大于1M！", type: "warning" });
          return false;
        } else if (size <= 0) {
          vm.$message({ message: "文件大小不能为0M！", type: "warning" });
          return false;
        } else {
          var fileTypes = [".png", ".jpg", ".PNG", ".gif", ".GIF"];
          var filePathName = event.target.files[0].name;
          if (filePathName) {
            var isNext = false;
            var fileEnd = filePathName.substring(filePathName.indexOf("."));
            for (var i = 0; i < fileTypes.length; i++) {
              if (fileTypes[i] == fileEnd) {
                isNext = true;
                break;
              }
            }
            if (!isNext) {
              vm.$message({ message: "不接受此文件类型", type: "warning" });
              return false;
            } else {
              vm.importFile();
            }
          } else {
            return false;
          }
        }
      } else {
        return false;
      }
    },
    chooseFile() {
      this.$refs.nativeInput.click();
    },
    importFile() {
      const vm = this;
      vm.uploadingImgLoading = true;
      try {
        uploadFile({
          filename: vm.fileList[0],
        }).then((res) => {
          if (res.status === 200 && res.data) {
            vm.isShowImage = true;
            vm.importImgReturn = res.data.data;
            vm.picFileName = res.data.data.key;
            vm.$refs.nativeInput.value = null;
            vm.sendParentImg();
            vm.uploadingImgLoading = false;
            vm.$message({ message: "图片上传成功", type: "success" });
            // vm.imageUrl = 接口返回地址
            downImg({
              filename: res.data.data.key,
            }).then((data) => {
              if (data) {
                vm.imageUrl = window.URL.createObjectURL(data.data);
              }
            });
          }
        });
      } finally {
      
      }
    },
    sendParentImg() {
      const vm = this;
      vm.$emit("getImportImg", {
        fileList: vm.fileList,
        imgPath: vm.picFileName,
        obj: vm.importImgReturn,
      });
    },
  },
};
</script>
  
  <style lang ="scss">
.pic_container {
  display: inline-block;
  font-size: 14px;
  // img
  .pic-note {
    font-size: 12px;
    color: rgba(106, 107, 116, 1);
    height: 16px;
    line-height: 15px;
    margin-top: 5px;
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    background-color: rgba(250, 250, 250, 1);
    font-size: 28px;
    color: gray;
    width: 166px;
    height: 96px;
    line-height: 80px;
    text-align: center;
    border: 1px dotted gray;
    border-radius: 4px;
    .iconfont {
      font-size: 52px !important;
    }
  }
  .avatar {
    width: 166px;
    height: 96px;
    display: block;
    overflow: hidden;
  }
  .avatar_box {
    border: 1px dashed #d9d9d9;
  }
  .updata_img_pic_txt {
    position: absolute;
    color: rgba(101, 103, 122, 1);
    line-height: 16px;
    top: 63px;
    left: 55px;
    font-size: 14px;
  }
}
</style>

页面内直径引入组件使用即可

import UploadImg from '@/components/uploadImg/uploadImg'

 <upload-img @getImportImg="getImportImg" :get-img-data="sendImgData"/>
 
 getImportImg(res){
  const vm = this;
   if(res){
     vm.ruleForm.logoPic = res.imgPath;
   }
 }