上传文件组件(含api需要传2个参数的方法)
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