element 批量上传文件时，根据文件类型上传到不同的服务器

最新推荐文章于 2023-08-25 15:18:53 发布

Surbowl

最新推荐文章于 2023-08-25 15:18:53 发布

阅读量532

点赞数

分类专栏： element vue js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Surbowl/article/details/108280006

版权

本文介绍如何使用 Element UI 的 upload 组件，在批量上传文件时，根据文件类型（如图片、音频）将文件分别上传到不同的服务器。由于 before-upload 方法在批量上传时可能出现问题，所以采用 http-request 属性来自定义上传逻辑，确保每个文件能正确发送到对应的服务器。

摘要由CSDN通过智能技术生成

图片和音频文件由不同的服务器存储，但是经常要批量上传一堆杂七杂八的文件
在这里插入图片描述

原先尝试在 before-upload 中动态改变 action，经过测试发现这个方法只适合上传单个文件，选择多个文件时会传错服务器（也有可能是因为我太菜了）。
好在 element upload 留了一个 http-request，允许自定义上传的实现。
简化了一些代码，主要记录判断方式。

<el-upload class="upload-demo" drag :multiple="true" :show-file-list="false" :http-request="uploadFile" action="">
    <i class="el-icon-upload

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Surbowl

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element-ui upload组件多文件上传的示例代码

10-17

Element-UI Upload组件是基于Vue.js的前端框架Element UI中的一个功能强大的上传组件，它提供了丰富的自定义选项和事件处理，适用于多种文件上传场景。在本示例中，我们将深入探讨如何利用Upload组件实现多文件上传...

element upload支持批量上传且支持不同文件上传不同服务

風缘的博客

08-27

1400

最近项目中遇到个新需求，添加附件时要支持附件的批量上传。目前项目中附件上传是一个一个上传，图片和其他类型的文件分别上传到不同的服务。原本想是直接加上:multiple="true" 就完事，事实并不如此，先看下代码： <el-upload ref="upload" :multiple="true" :action="uploadAction" :accept="acceptUpload" :auto-upload="true" :show-file-li

参与评论您还未登录，请先登录后发表或查看评论

Vue Element ui Upload组件在上传文件时，动态切换 action上传路径

学而不思则罔,思而不学则殆

06-29

6261

Upload ，动态切换 action上传路径。

element上传多个图片

qq_44927627的博客

11-18

7808

element上传多个图片在vue中图给出的图片上传例子其实都是上传完后自动提交，博主在写的时候遇到了很多坑。 1、先说下element中图片上传的一些要点 1、想要实现多图片上传一定要标注multiple属性、而且一定要是自己手动实现上传功能、这里有两个方法：（1）利用默认element提供的方法this.$refs.upload.submit() （2）重写http-request=""方法注意上面两种方法，使用方式是一样的，都是自己封装好一个FormData,然后调用axios，而且axi

Element-UI的Upload 上传文件

热门推荐

sleepwalker_1992的专栏

08-31

1万+

Element-UI的Upload 上传文件，判断上传的文件类型及文件大小

element 文件批量上传展示上传结果、失败重新上传

小破孩的博客

07-18

884

element 文件批量上传展示上传结果、失败重新上传

vue+elements----el-upload文件上传/类型限制。上传单个文件/多个文件

DcTbnk的博客

04-14

1282

element-ui upload组件 上传文件类型限制原链接 → 点击可查看原链接 → 点击可查看 beforeUpload(file) { console.log(file) var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'xls' const extension2

element-ui 中使用upload多文件上传只请求一次接口

10-16

在使用Element UI的Upload组件进行多文件上传时，若要实现只发送一次请求到后端接口，可以通过两种主要的方法来实现。这两种方法分别是不使用组件内部钩子和使用组件内部的回调。首先，来看不使用组件内部钩子的...

element-ui+vue单文件上传和多文件批量上传（多文件走一次接口）.pdf

12-16

本文将详细讲解如何使用Element UI与Vue.js实现单文件上传和多文件批量上传，且确保所有文件通过一个接口进行提交。首先，我们需要安装Element UI库。在项目根目录下运行以下命令： ```bash npm install element-...

使用FormData实现上传多个文件

10-17

`FormData`对象用于存储键值对，特别适用于发送数据到服务器，尤其是当数据包含文件时。创建一个`FormData`对象，然后使用`append`方法添加文件或文本数据。例如： ```javascript var formData = new FormData(); ...

【无标题】element批量上传

QPH0109的博客

05-18

397

element批量上传

elementui中同时上传多个文件_element-ui upload组件实现多文件上传

weixin_39831567的博客

01-14

2079

element-ui upload组件实现多文件上传element-ui upload组件实现多文件上传需求：我司要求实现多文件上传，且要求使用formData传递参数。环境：vue+element-ui+axios实现：1. 使用element-ui upload组件搭建上传文件页面，页面示例如下：代码如下：将文件拖到此处，或点击上传只能上传.xml文件确定取消2. data中设置两个变量f...

vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件

m0_56471534的博客

02-24

1987

使用element-ui的上传文件组件写一个批量上传和上传文件，但是发现每次上传文件后或者批量上传文件后，不能再次上传文件或者批量上传文件。只有进入页面第一次点击上传文件或者批量上传文件才能够调用上传接口，进行文件上传，第二次上传文件或者批量上传文件只能对页面进行刷新才能上传文件。

elementui中同时上传多个文件_element ui 上传文件，批量一次上传多个文件，为什么是发送了多次请求，我想一次请求，然后发送多个文件怎么实现呢？...

weixin_30467861的博客

01-14

870

想要的效果是用户一次选择的文件一个接口上传完毕，但是element ui 里面是上传了多次一次一个文件的形式上传的为4参数的接口调用了多次执行的上传，我想上传一次多个文件的怎么实现呢？因为element ui 里面的列表和我们的需求不一致我重写了一个列表class="upload-demo"ref="upload"drag:data="Aobject":on-success="handl...

vue element 如何使文件批量上传

weixin_41838204的博客

08-24

9062

问题:大家使用element自带的文件上传功能时。虽然说文件是批量上传的，但是。其实他们都是一个一个传上去的。我司的后端说要将所有的文件全部一次性上传。解决方法：我们不可以用element自己的上传控件，需要自己写一个控件。代码如下 submitUploadET() { let formData = new FormData() this.ETf...

Vue3+ElementPlue文件批量上传(自定义上传列表)

qq_42436422的博客

08-17

6044

基于vue3、ts、elementplus的拖拽批量上传，且上传列表为表格自定义，可单选多选

elementUI 文件上传批量上传弹窗