话不多说先看代码！

<template>
  <div>
    <input type="file" style="display:none;" ref="uploader" @change="doUpload($event)">
    <div v-if="fileFlag">
      <i class="el-icon-close" style="position: relative;left: 101px;top: 20px;" @click="remove"></i>
      <img :src='url' style="width:100px;height:100px">
    </div>
  </div>
</template>

export default {
  name: "Upload"，
  data() {
    return {
      fileFlag: false,    //是否上传成功
      url: '',      //上传后的文件url
    };
  },
  created() { },
  mounted() { },
  methods: {
    doUpload(event) {
      //上传到阿里云 初始化oss
      let client = new OSS({
        region: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: ''
      });
      let file = event.target.files[0]
      //生成路径
      let date = dateFormat("yyyyMMdd", new Date());    //格式化日期
      let path = '';    //文件保存路径
      if (this.ENV == 'develop') {
        path = "ttqWeb/him/dev/" + date + "/";
      } else {
        path = "ttqWeb/him/pd/" + date + "/";
      }
      let random_name = randomString(10);  //生成随机字符串
      let object_name = path + random_name + file.name;
      client.multipartUpload(object_name, file, {
        progress: function (p) {
          console.log('已上传' + (p * 100) + '%');
        }
      }).then((result) => {
        this.url = "上传的阿里云网址" + object_name;
        //将生成的url传递给父组件
        this.$emit('uploadSuccess', {
          url: this.url
        })
      }).catch(function (err) {
      }).finally(() => {
      });

    },
    //文件删除操作
    remove() {
      this.url = ''
      this.$emit('removeSuccess', {
        url: this.url
      })
      this.fileFlag = false;
    },
    //通过refs调用上传组件
    trigger() {
      this.$refs.uploader.click();
    }
  }
};

外部引用

<upload @complete="uploadFinish">
  <div> 点击上传的控件</div>
</upload>
...
import Upload from '@/components/common/Upload'
  components: {
    'upload': Upload
  },
method:{
 uploadFinish(url) {
      console.log(url);
    },
}