el-upload上传一张图片，并隐藏上传框

先展示效果图：上传一张照片后上传框隐藏，点击图片出现删除图标

 

 代码使用el-upload上传文件缩略图，部分图标按需求增加或者注释

<div class="bg90 bg-height marginB10 freePic">
              <el-upload action="#" 
              list-type="picture-card" :limit="1" 
              :auto-upload="false" 
              :on-change="handleUpload" 
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              ref="uploadImage"
              :class="{hide:hideUpload}"
           >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <!-- <span v-if="!disabled" class="el-upload-list__item-delete" 
                     @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span> -->
                  <span v-if="!disabled" class="el-upload-list__item-delete" 
                    @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                  </span>
                </div>
                <!-- <img width="100%" v-if="dialogImageUrl" :src="dialogImageUrl" alt="" />
                <i v-else slot="default" class="el-icon-plus"></i> -->
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>

 data中写入：

data(){
    return{
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
}
}

 methods中写入：

handleUpload(data) {
      this.hideUpload=true
      const file = data.raw
      const form = new FormData()
      form.append('file', file)
        //调用接口
      this.http.file(xxxxxxx res => {
        this.dialogImageUrl = res.url
      })
    },
handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
handleRemove(file,fileList) {
      this.hideUpload=false
      this.$refs.uploadImage.handleRemove(file)
    },

最后控制样式：

.freePic ::v-deep .hide .el-upload--picture-card {
  display: none;
}