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

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

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

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

 

        
          :customRequest="customRequest">
          
        
  

  

        
        >
    
...

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

效果如下：

唉，之前也是调了老半天