上传文件组件(含api需要传2个参数的方法)
2023-09-27 14:25:19 时间
https://www.antdv.com/components/upload-cn/#%E7%82%B9%E5%87%BB%E4%B8%8A%E4%BC%A0
<a-upload
accept=".yml,.json"
name="file"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
@change="handleChange"
:file-list=[]
>
:file-list设置为空数组 上传时可以隐藏上传列表 ,设置为空后发现 调用函数里面获取不了东西,最后是再写了个标签去触发这个组件(把组件隐藏起来)
accept=".yml,.json" 控制只能上传什么文件
后记:
要控制上传时不展示上传列表 直接有api控制的
![](https://img2020.cnblogs.com/blog/1226993/202012/1226993-20201207152824785-666598531.png)
<a-upload
:showUploadList="false"
:customRequest="e => uploadImage(e,record.id)" -------------------穿2个参数的方法
:multiple="true"
:headers="headers"
>
例子:
(亲测可以,上传接口地址 放到action属性)
<template> <a-upload accept=".yml,.xls" 允许上传类型 name="file" 发送后台文件参数 :multiple="true" action="/v2/readExcel" 请求地址 :headers="headers" @change="handleChange" :showUploadList="false" 进度条 > <a-button> <a-icon type="upload" /> Click to Upload </a-button> </a-upload> </template> <script> export default { data() { return { headers: { authorization: 'authorization-text', }, }; }, methods: { handleChange(info) { if (info.file.status !== 'uploading') { console.log(info.file.name); console.log(info.file.uid); } if (info.file.status === 'done') { console.log(222); // this.$message.success(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { console.log(333); // this.$message.error(`${info.file.name} file upload failed.`); } }, }, }; </script>
后端代码: https://www.cnblogs.com/kaibindirver/p/15470706.html
相关文章
- Android开发之布局文件里实现OnClick事件关联处理方法
- linux环境中通过7-zip软件进行文件的压缩和加密的方法
- pandas读取tsv大文件(GB)方法 表头就是文件的第一行的描述,header为0代表第0行为表头,为None代表无表头,每一行都算数
- 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法
- Python shutil文件操作、文件夹操作
- Asp.net中的VS2010中的ashx文件,【转到定义】失效的解决方法!(终于找到原因了)
- C#【通用方法】ini文件的读和写
- 每日Ubuntu小技巧 —— 让Windows访问你文件的最简单的方法
- [转]html页面调用js文件里的函数报错onclick is not defined处理方法
- linux下的什么工具可以用来查看PostScript文件?
- Ajax简单实现文件异步上传的多种方法
- pycharm自动换行对所有文件和对当前文件有效
- 两台Linux系统之间传输文件的几种方法
- java web response提供文件下载功能
- 利用jQuery实现ajax下载文件时进度条
- java 分次读取大文件的三种方法
- JSP文件下载及出现getOutputStream() has already been called for this response的解决方法
- windows 批处理把所有java源码导入一个txt文件中
- 浅析实际场景如何应用缓存策略:项目中什么文件用强缓存什么文件用协商缓存
- impdp导入DMP文件时报ORA-39083和ORA-29516错误完美解决方法
- Unity 工具 之 (SharpZipLib) 实现文件Zip的压缩和解压((可代密码)可一次压缩多个文件/文件夹)
- springMVC3学习(十二)--文件上传优化CommonsMultipartResolver
- Rational Rose 2007 &Rational Rose 2003 下载及破解方法和汉化文件下载
- [C#.Net]判断文件是否被占用的两种方法
- DVWA文件上传出现Incorrect folder permissions&The PHP module GD is not installed.的解决方法