element el-upload hides the upload after uploading the picture

Here is the code directly, and you can test it yourself.
Here only hide the upload button after uploading one photo. If you need to upload multiple photos, you can modify the limit attribute yourself.

<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>

Before uploading:

Insert picture description here

After uploading:

Insert picture description here
tip: If you have any questions or technical exchanges, add Penguin: 995062855. Indicate your coming,

Guess you like

Origin blog.csdn.net/weixin_42201180/article/details/108141581