vue3自定义文件导入通用模板

汤卓杰

已于 2022-02-15 11:20:24 修改

阅读量1.4k

点赞数

文章标签： elementui vue.js upload

于 2022-02-15 10:55:29 首次发布

本文链接：https://blog.csdn.net/tang31415926/article/details/122938864

版权

本文介绍如何在Vue3中自定义ElementUI的el-upload组件，添加上传路径和数据、下载模板、文件大小和类型限制等功能。并详细阐述了如何在父组件中使用该组件，以及上传限制的实现方法，包括文件个数、大小和类型的控制。

摘要由CSDN通过智能技术生成

1、将原有el-upload编辑，添加功能，统一import，传数据即可

包括：上传路径和数据、下载模板、限制文件大小和类型

2、使用

父组件import该vue文件，声明组件components：{}，@refreshDataList上传成功后触发的父组件的事件（info），:fileForm为子组件接受的值，父组件传递值（fileForm）如下：

fileForm:{//父组件传递值结构
  importUrl:'123',//导入url，url统一"/"开始
  importData:{//导入时要传的数据
  },
  exportUrl:"",//下载模板url
  exportName:"",//下载模板文件名
  fileType:[],//上传文件类型限制，array，默认['jpg','png','txt','zip', 'rar','pdf','doc','docx','xlsx']
  fileSize:0//上传文件大小限制，单位kb，默认500
}