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

简介: 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,注明来意。

相关文章
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
902 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2802 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
2018 0
Element-UI中el-upload上传组件(demo详解)
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
1539 1
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
3481 1
|
JavaScript
Vue2之父与子组件互相传参和方法调用
这篇文章介绍了Vue 2中父子组件之间互相传参和方法调用的四种方式:通过`ref`调用子组件方法、通过`props`调用父组件方法、父组件通过`:param`传参给子组件,以及子组件通过`emit`传参给父组件。
2217 0
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
659 0
|
前端开发 数据格式
vue+element-plus上传图片功能以及回显问题还有数量限制
vue+element-plus上传图片功能以及回显问题还有数量限制
714 0
|
存储 小程序
【边做边学】uni.switchTab的目标页面获取不到url携的参数
【边做边学】uni.switchTab的目标页面获取不到url携的参数
687 1