Element ui 中 upload 组件一次请求批量上传
 |  |  |  |
| 【性价之王】 | 【线路之王】 | 【价格之王】 | 【配置之王】 |
| 【免费之王】 | 【香港首推】 | 【梯子之王】 | 【独服之王】 |
Element ui 是由饿了么团队推出的基于 vue 的前端库，功能非常强大，其中的 upload 组件可以轻松的实现前端通过点击或者拖拽上传文件。不过 upload 组件默认的批量上传却是逐项上传，也就是你一次批量选择 5 个文件，那么会发送 5 次请求来分别上传这 5 个文件。
那么 Element ui 中 upload 组件怎么实现一次请求批量上传呢？这就需要通过自定义 http-request 来覆盖默认的上传行为，实现自定义上传，具体代码如下：
<template> <d2-container> <el-upload class="upload-demo" ="upload" action="" :http-request="customUpload" :before-upload="beforeFileUpload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList" :auto-upload="false" accept=".dbf" multiple> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <!--div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>--> </el-upload> </d2-container> </template> <script> export default { data() { return { fileList: [], fileData: new FormData() }; }, methods: { submitUpload() { this.$s.upload.submit(); fileUpload(this.fileData).then(response => { }) }, beforeFileUpload(file){ let extension=file.name.substring(file.name.lastIndexOf('.')+1); const isDbf = extension === "dbf"; const isLt10M = file.size / 1024 / 1024 < 10 if (!isDbf) { this.$message.error('上传的数据文件只能是 dbf 格式!'); } if (!isLt10M) { this.$message.error('上传的单个数据文件大小不能超过 10MB!'); } return isDbf && isLt10M; }, handleRemove(file, fileList) { }, handlePreview(file) { }, handleSuccess(response,file, fileList) { this.$message.success('上传成功') }, customUpload(file) { this.fileData.append('files[]', file.file) return false } } } //引入 axios import request from '@/plugin/axios' export function fileUpload(file) { return request({ method: 'post', url: 'http://localhost/api/import', headers: {'Content-Type':'multipart/form-data'}, data: file }) } </script>代码说明：
1.配置自定义的 http-request 函数：
:http-request="customUpload"2.在 data 中添加一项参数：fileData，类型是 FormData:
fileData: new FormData()3.实现 customUpload 方法，将上传文件信息拼接到 fileData 中。
customUpload(file) { this.fileData.append('files[]', file.file) return false }4.定义 axios 异步上传方法：
export function fileUpload(file) { return request({ method: 'post', url: 'http://localhost/api/import', headers: {'Content-Type':'multipart/form-data'}, data: file }) }5.在 submitUpload 中调用 4 中定义的上传方法：
submitUpload() { this.$s.upload.submit(); fileUpload(this.fileData).then(response => { //console.log(response) }) },猜你可能想看的VPS
- 轻云互联→99 元 年 2 核 1GB 内存 20GB SSD 空间 不虚拟空间(主机)
- Hetzner 新上架 AMD Ryzen 5 系列独立服务器 AX41独立服务器[U]
- 数据湾→香港日本新加坡美国独立服务器促销 香港独服 550 元 月 I3独立服务器[U]
- pacificrack→5 月特价便宜 VPS $9.89 年 KVM 全球[VPS测评]
- ZJI→香港云地&邦联服务器 65 折 香港葵湾特惠 6 折月付 450香港VPS[主机]
- racknerd→“老板生日促销+送红包” $15.88 年 KVM 1全球[VPS测评]
- NameSilo→.xyz .top 等域名 首年 0.99 美金 一次全球[VPS测评]
- 织梦 CMS 怎么在首页模板和列表页模板调用图集里的所有图片全球[VPS测评]
- PHP 获取上周所有日期 PHP 获取当前时间前一周七天具体日期全球[VPS测评]
- DedeCMS 友情链接去掉 li 标签 DedeCMS 怎么去掉友情链全球[VPS测评]
- 羊毛 ikoula 送 100 欧元 可以免费撸 2 年的 VPS 目前美国VPS[主机]
- 如何阻止Windows Update捆绑更新设备驱动WINDOWS
- 如何为WordPress网站站外链接添加自动nofollow功能全球[VPS测评]
- LucusHost → 4.2€ 月 西班牙 1C1G15G硬盘 100全球[VPS测评]
- Virtono → €30年付 1C1G30G硬盘 香港 日本 新加坡 日本VPS[主机]
- HostDoc 1核心 3G内存 30G SSD 60G HDD 1T流美国VPS[主机]
- 企鹅小屋怎么样?深港IPLC专线销售 500M大带宽/2核1G内存/55全球[VPS测评]
- 无忧云怎么样?大连BGP德阳100G高防香港CN2VPS云服务器香港VPS[主机]
- 2022年黄河流域跨境电商博览会将于8月26日至28日在青岛西海岸新区举全球[VPS测评]
- 跨境电商平台首选香港服务器香港VPS[主机]
- 腾讯云香港轻量应用服务器 优惠活动最低月付仅24元香港VPS[主机]
- Centos7的firewall 防火墙如何设置端口转发？全球[VPS测评]
- VPS成立BurjeelHoldings全球[VPS测评]
- CubeCloud,靠谱的香港cn2vps,美国cn2终身九折,原生IP美国VPS[主机]
- 极光KVM：香港CN2大带宽vps6折优惠,美国CN2 GIA套餐年付低美国VPS[主机]
- 如何设置指定路径跳转指定域名？全球[VPS测评]
- RFCHost：1核1G洛杉矶vps/15GB空间/1TB流量/KVM/虚拟空间(主机)
- 腾讯云免备案海外服务器：高速网络免备案，助力企业出海!全球[VPS测评]
- edgeNAT：2021元旦vps促销_全场韩国/美国/香港VPS低至7韩国VPS[主机]
- 中行升级服务力促跨境电商发展全球[VPS测评]
转载请注明原文地址:http://140.238.13.167:12355/read-207556.html