采用默认上传文件样式如下：
主要代码如下，可参照官方示例
<a-uploadname="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-uploadname="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-uploadstyle="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...
效果如下：
唉，之前也是调了老半天
