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

相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
801 0
|
6月前
elementUI el-upload上传组件实战使用
elementUI el-upload上传组件实战使用
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3744 0
el-upload上传组件accept属性限制文件类型(案例详解)
element ui 带上传文件的form表单
element ui 带上传文件的form表单
908 0
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1612 0
Element-UI中el-upload上传组件(demo详解)
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
451 0
|
3月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
48 0
|
4月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1276 0
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
400 0