图片上传及组件化 vue+element

例图

element参考链接

uploadImage.vue (在src下的components文件夹中)

<template>
  <el-upload :action="defaultUrl" name="file" multiple :on-success="handleUploadImages" :show-file-list="false">
    <el-button icon="el-icon-upload" size="small" type="primary">{{ btnText }}</el-button>
    <div slot="tip" class="el-upload__tip">{{ tip }}</div>
  </el-upload>
</template>
<script>

export default {
  props: {
    tip: {
      type: String,
      default: '只能上传jpg/png文件，且不超过500kb'
    },
    btnText: {
      type: String,
      default: '点击上传'
    }
  },
  data() {
    return {
      defaultUrl: '接口地址' 
    }
  },
  methods: {
    // 上传成功回调
    handleUploadImages(response) {
        // 父传子传递
      this.$emit('uploadSuccess', response)
    }
  }
}

</script>

ceshi.vue (在ceshi文件中调用图片上传组件)

<template>
    // 使用组件
    <upload-image id="storyCover" @uploadSuccess="handleUploadCoverSuccess" />
    <div class="el-upload el-upload--picture-card">
      <i slot="default" class="el-icon-plus"></i>
      <img class="el-upload-list__item-thumbnail" :src="msg.url" alt="">
    </div>
</template>
<script>
//引入组件
import UploadImage from '@/components/UploadBookImage'

export default {
// 注册组件
  components: {
    UploadImage
  },
  data(){
    msg: {
      url: ''
    }
  },
  methods: {
    // 子传父回调函数
    handleUploadCoverSuccess(file) {
        this.msg.picUrl = file.message[0]
    }
  }
}

</script>