采用默认上传文件样式如下：

主要代码如下，可参照官方示例

       <a-upload
          name="file"
          style="float: left;"
          @change="uploadFile"
          :fileList="fileList"
          :showUploadList="false"
          :customRequest="customRequest">
          <a-button style="margin: 2px 2px;" icon="upload"></a-button>
        </a-upload>

想要固定button位置和上传文件列表展示位置, 思路为引用两个upload组件，一个带上传button，只负责上传文件操作，不显示文件列表；将文件列表数据赋值给另一个组件，另一个组件负责展示文件列表。两个组件分别置于两个div中,因此可以通过控制div样式来调整位置。关键代码如下：

<!-- 上传文件-->
 <div class="list-button">
        <a-upload
          name="file"
          style="float: left;"
          @change="uploadFile"
          :fileList="fileList"
          :showUploadList="false"    <!--设置该组件不显示文件列表-->
          :customRequest="customRequest">
          <a-button style="margin: 2px 2px;" icon="upload"></a-button>
        </a-upload>
  </div>
<!-- 展示文件列表-->
  <div class="show-file-name">
        <a-upload
          style="float: left;width:100%"
          :fileList="showFileList"    <!--设置该组件文件列表-->
        ></a-upload>
    </div>
...

export default{
    data(){
        return{
             fileList:[],
             showFileList:[]
        }
    },
     methods:{
        uploadFile(info){
                // console.log("info:", info);
                let { fileList } = info;
                const status = info.file.status;
                if (status !== 'uploading') {
                    console.log("uploading...",info.file, info.fileList);
                }
                if (status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
                this.fileList = [...fileList].slice(-1);    //只保留最新上传的一个文件
                this.showFileList = this.fileList;  //文件列表赋值
            },
    }
}


...css...

效果如下：

唉，之前也是调了老半天

文档介绍的关键参数：

上传的组件：

<a-upload-dragger
          v-model:fileList="fileList"  //双向绑定的变量是文件数组
          name="file"                 // 发到后台的文件参数名
          :before-upload="beforeUpload"   //上传文件之前的钩子，参数为上传的文件
          @change="handleChange"  //change	上传文件改变时的状态
        >
          <p class="ant-upload-text">上传文件</p>
        </a-upload-dragger>

上传的逻辑 

import axios from "axios";
//TS
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
} 

//拦截提交事件，将文件数据填入List
    const fileList = ref<FileItem[]>([]);
    const beforeUpload = (file: FileItem) => {
      fileList.value = [...fileList.value, file];
      formState.name = fileList.value[0].name;
      return false;
    };

    //确认提交按钮回调，如果不要这个按钮可以直接在beforUpload里面调用
    const onSubmit = (e) => {
      const data = new FormData();
      // 上传多个文件需要循环
      fileList.value.forEach((file: FileItem) => {
        file.status = "uploading";
        data.append("file", file.originFileObj);
        data.append("type", "FILE");
      });
      // 添加token
      // data.append("token", String(token));

      // 新建一个修改头部的axios，因为我其他的数据是通过URLSearchParams提交的，识别的头不同
      const upload_ax = axios.create({
        baseURL: "/api",  //在vite.config.js配置的跨域
        withCredentials: true,   //上传请求时是否携带 cookie
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });

      //用新的对象提交
      upload_ax.post('这里写上传链接的地址', data).then((response) => {
        // 处理数据完成情况
        console.log(response.data, "response");
      });
    };

上面的data解析完是表单数据格式 

FormData()这个函数不懂的点击蓝色字体查看用法

最后 

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤

CSDN大前端社区邀请您加入：CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云

实际项目中，上传文件时实际可能需要传输一个token。

方法一：

1、查看vue antdesign文档
https://vue.ant.design/components/upload-cn/

2、使用customRequest

customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现 Function 

3、定义customRequest，之前定义action行为会被覆盖，可以注释掉

4、customRequest代码如下

customRequest (data) {
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('token', 'aiufpaidfupipiu')//随便写一个token示例
      this.saveFile(formData)
    },
    saveFile (formData) {
      this.form.validateFields((err, values) => {
      if (!err) {
        let that = this
        this.axios(
        {
          method: 'post',
          url: 'http://localhost:4785/api/values/PostSingle',
          data: formData
        })
        .then((response) => {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
        }
      })
    },

5、这样当文件变化时，就会附带token并上传到服务器，NetWork观察提交数据如下

 6、有同学反映无法接受数据，现给一个后端代码demo(.netcore）参考，新建一个.netcore webapi工程，修改Post代码如下。

7、D盘下文件保存成功如下

 方法二：

最近发现有一种官方例子更符合习惯思维的方法，看这个例子

<template>
  <div class="clearfix">
    <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <a-button
      type="primary"
      @click="handleUpload"
      :disabled="fileList.length === 0"
      :loading="uploading"
      style="margin-top: 16px"
    >
      {{ uploading ? 'Uploading' : 'Start Upload' }}
    </a-button>
  </div>
</template>
<script>
import reqwest from 'reqwest';
export default {
  data() {
    return {
      fileList: [],
      uploading: false,
    };
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('files[]', file);//后面再加上token
      });
      this.uploading = true;

      // You can use any AJAX library you like
      request({
        url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        method: 'post',
        processData: false,
        data: formData,
        success: () => {
          this.fileList = [];
          this.uploading = false;
          this.$message.success('upload successfully.');
        },
        error: () => {
          this.uploading = false;
          this.$message.error('upload failed.');
        },
      });
    },
  },
};
</script>