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

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

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

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

效果如下：

唉，之前也是调了老半天

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

ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）
<a-uploadname="file" //发到后台的文件参数名:multiple="false" //禁用多选:file-list="fil ...
mysql 上传rar文件大小_js文件上传自定义压缩文件和文件格式及大小限制
1 $(function() {2 var count = 0;3 /*----------------------------------------------文件上传-------------- ...
jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小. ...
php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法
用dropzone插件拖拽文件上传默认情况是把一个文件拖到浏览器后就立即自动上传,参考前文<用dropzone插件拖拽文件上传>,如果需要一次上传多个文件怎么办?本文将介绍其实现方法. d ...
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
00截断上传绕过_【文件上传与解析】文件上传与解析漏洞总结v1.0
点击上方"公众号" 可以订阅哦! Hello,各位小伙伴晚上好~ 这里是依旧勤劳写公众号的小编~ 今天本公众号将推出一个新的模块,那就是漏洞知识点总结模块!!!(此处应有掌声~) ...
怎么用git将本地代码上传到远程服务器_git之如何把本地文件上传到远程仓库的指定位置...
2018.11.26添加内容: 对于自己的仓库,我们建议将远程仓库通过clone命令把整个仓库克隆到本地的某一路径下.这样的话我们从本地向远程仓库提交代码时,就可以直接把需要提交的文件拖到我们之前克隆 ...
hadoop HDFS的文件夹创建、文件上传、文件下载、文件夹删除，文件更名、文件详细信息、文件类型判断（文件夹或者文件）
摘要: 本篇文章主要介绍的是hadoop hdfs的基础api的使用.包括Windows端依赖配置,Maven依赖配置.最后就是进行实际的操作,包括:获取远程hadoop hdfs连接,并对其进行的一 ...
php 上传文件后缀名,对应PHP文件上传后缀名与文件类型
Internet上有许多PHP文件上传的处理方法,其实学习PHP的人都知道如何上传文件,但许多人可能会忽略编程中的一些细节,今天爱站技术频道小编为大家介绍对应PHP文件上传后缀名与文件类型. ie 火 ...

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

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

最新文章

热门文章