1.获取后台接口上传图片

 <el-upload
  class="avatar-uploader"
  ref="upload"
  list-type="picture-card"
  action="/qiniu/upload"      //后台接口
  :before-upload="beforeUpload"
  :on-change="handleChange"
  :on-success="handleAvatarSuccess"
  :auto-upload="false"
  :data="param"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :limit="1">
  <i v-if="!this.imageUrl" class="el-icon-upload2"><span class="cash_span">上传列表图</span></i>
</el-upload>
<span class="el-upload-actions" v-if="this.imageUrl" @mouseenter="enterPath()" @mouseleave="leavePath()">
  <img v-if="this.imageUrl" width="100%" :src="this.imageUrl" alt="" >
    <span v-if="showPath" class=" preview"  @click="handlePreview()">
      <i class="el-icon-zoom-in preview_i"></i>
    </span>
    <span v-if="showPath" class=" delete" @click="handleDelete()">
      <i class="el-icon-delete delete_i"></i>
    </span>
</span>
<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
  <img width="100%" :src="this.imageUrl" alt="">
</el-dialog>           

2.功能实现代码

 //鼠标移入时
  enterPath(){
    this.showPath = true;
  },
  //鼠标移出时
  leavePath(){
    this.showPath = false;
  },
  //预览
  handlePreview(){
    console.log('111');
    this.dialogVisible = true;
  },
  //删除
  handleDelete(){
    console.log('222');
    this.$refs.upload.clearFiles();
    this.imageUrl = '';
  },
  //上传图片
  handleChange (file, fileList) {
    this.param.imgFile = file.raw;
    let vm = this;
    vm.$refs.upload.submit();
  },
  //获取上传图片时后台返回的地址     
  handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);   //获取上传图片的本地地址
    this.imageUrl = res.data.qnUrl
  },
  beforeUpload(file) {
    return true;
  },