zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

 

 

<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