vue 中 单图上传笔记

第一步 ： cnpm install vue-core-image-upload --save  

第二步：import VueCoreImageUpload from 'vue-core-image-upload'

第三步：components: {VueCoreImageUpload}

第四步：<vue-core-image-upload

     class="avatar-uploader"
    :crop="false"
    text="请选择图片"
    compress="25"
   inputOfFile="file"
   @imageuploaded="imageuploaded"
   @imageuploading="imageuploading"
   :max-file-size="10485760"
   :credentials="false"
   url="https://jsonplaceholder.typicode.com/posts/">
</vue-core-image-upload>
<div class="center">
  <img :src="form.bannerImg" class="avatar"/>
</div>

imageuploading() {
  this.show_load = true
},
imageuploaded(res) {
  this.text = '已上传'
  // res 是后台传过来的图片地址
  this.form.bannerImg = res  //用于赋值
  this.show_load = false
},

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: aquamarine;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid black;
  }

  .avatar {
    width: 300px;
    height: 178px;
    display: block;
  }

  .text {
    text-align: left;
  }

  ::v-deep .w-e-text-container {
    height: 420px !important;
  }
</style>

<el-table-column prop="bannerImg" label="缩略图">
  <template slot-scope="scope">
    <img :src="scope.row.bannerImg" alt="" style="width: 120px;height: 60px">
  </template>
</el-table-column>