element el-upload上传图片完成后隐藏上传

这里就直接上代码了，亲测可以。 这里只弄了上传一张照片后隐藏上传按钮，如需上传多张，自行修改limit属性即可。

<template>
    <el-card class="card">
      <el-upload
        :class="{hide:hideUploadEdit}"
        :headers="this.headers"
        :action="this.url.fileUpload"
        :on-preview="handlePicPreview"
        :on-remove="handlePicRemove"
        :on-success="handlePicSuccess"
        :on-change="handlePicChange"
        :file-list="fileList"
        :limit="1"
        list-type="picture-card">
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-card>

</template>

<script>
  import Vue from "vue";
  import {
          
   ACCESS_TOKEN} from "@/store/mutation-types"

  export default {
          
   
    name: "MachCheck",
    data() {
          
   
      return {
          
   
        dialogImageUrl: ,
        dialogVisible: false,  // 大图预览框
        hideUploadEdit: false, // 是否隐藏上传按钮
        headers: {
          
   },
        fileList: [],
        url: {
          
   
          fileUpload: window._CONFIG[domianURL] + "/sys/common/upload", // 上传地址
        },
      }
    },
    created() {
          
   
      /* 获取token头信息 */
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {
          
   "X-Access-Token": token}
    },
    methods: {
          
   
      /* 上传后和删除后都要判断是否隐藏 */
      handlePicRemove(file, fileList) {
          
   
      	// 大于1张隐藏
        this.hideUploadEdit = fileList.length >= 1
      },
      handlePicChange(file, fileList) {
          
   
        // 大于1张隐藏
        this.hideUploadEdit = fileList.length >= 1
      },
      handlePicPreview(file) {
          
   
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlePicSuccess(response, file, fileList) {
          
   
        console.log(response, file, fileList);
      },
    }
  }
</script>

<style>
  .hide .el-upload--picture-card {
          
   
    display: none;
  }
</style>

上传前：

上传后：

tip：如有问题或技术交流➕微：JavaBoy_1024，注明来意。