Ant Design Vue 文件上传自定义按钮和文件列表位置

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

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

       <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...

效果如下：

唉，之前也是调了老半天