上传文件组件(含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控制的

 

 

 

<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