el-upload上传组件(隐藏上传按钮/隐藏文件删除标记)
时间:2021-09-17
本文章向大家介绍el-upload上传组件(隐藏上传按钮/隐藏文件删除标记),主要包括el-upload上传组件(隐藏上传按钮/隐藏文件删除标记)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template> <el-upload ref="uploadFile" :class="[showUploadBtn ? '' : 'hidden-Btn']" //是否隐藏点击上传的按钮 :disabled="!showUploadBtn" //是否隐藏文件删除标记 action="#none" :http-request="uploadSectionFile" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="fileChange" :auto-upload="false" multiple :on-exceed="handleExceed" :file-list="fileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { name: "UploadFiles", props: { files: { type: Array, default: () => [], }, /*是否显示上传文件按钮、是否显示文件删除×号*/ showUploadBtn: { type: Boolean, default: true, }, }, data() { return { fileList: this.files, }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); // 改变文件列表 this.fileList = fileList; }, handlePreview(file) { console.log("handlePreview:", file); if (file.url) { window.open(file.url); } }, handleExceed(files, fileList) { this.$message.warning( `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${ files.length + fileList.length } 个文件` ); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, // param是自带参数。 // this.$refs.uploadFile.submit()会自动调用 httpRequest方法.在里面取得file uploadSectionFile(param) { var fileObj = param.file; // FormData 对象 var form = new FormData(); // 文件对象 form.append("file", fileObj); console.log("dfdg:"); console.log(form); let arr = []; this.fileList.forEach((element) => { let formData = new FormData(); formData.append("file", element); arr.push(formData); }); }, // fileList 是文件列表发生变化后,返回的修改后的列表对象,这里直接赋值 fileChange(file, fileList) { console.log(file.raw); // 改变文件列表 this.fileList = fileList; }, }, }; </script> <style scoped lang="scss"> .hidden-Btn { /deep/ .el-upload { display: none; } } </style>
原文地址:https://www.cnblogs.com/yiliangmi/p/15305186.html
- mysql几种存储引擎介绍
- Java基础-21(02)总结字符流,IO流编码问题,实用案例必做一遍
- DeDeCMS v5.7 密码修改漏洞分析
- Java基础-20(01)总结,递归,IO流
- 一个Oracle bug的手工修复(r6笔记第59天)
- 由drop datafile导致的oracle bug(r6笔记第56天)
- Java中static关键字的作用
- Java基础-20(02)总结,递归,IO流
- Hive四种数据导入方式
- 34c3 部分Web Writeup
- 原来Oracle也不喜欢“蜀黍"(r6笔记第54天)
- Java基础19(01)总结IO流,异常try…catch,throws,File类
- 使用shell生成orabbix自动化配置脚本(r6笔记第53天)
- 现在 tensorflow 和 mxnet 很火,是否还有必要学习 scikit-learn 等框架?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 进阶教程(1)--面向对象编程
- Flask架站基础篇(八)--SQLAlchemy(2)
- JavaWeb - EL and JSTL
- Python模拟登陆新版知乎
- 第一天:创建型模式--工厂方法模式
- 第二天:创建型模式--抽象工厂模式
- 第三天:创建型模式--建造者模式
- JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
- python api链接数据库
- MySQL 的可重复读
- 第四天:创建型模式--原型模式
- Ubuntu16升级Python3
- JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
- 第五天:结构型模式--适配器模式
- 第六天:结构型模式--修饰器模式