vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。

最新推荐文章于 2025-03-19 15:33:16 发布

--erPang

最新推荐文章于 2025-03-19 15:33:16 发布

阅读量1.8w

点赞数 4

分类专栏： vue 文章标签： element-ui upload fordata

本文链接：https://blog.youkuaiyun.com/a12541254/article/details/79187130

版权

这边博文主要介绍的是使用element-ui的upload上传组件实现自定义多图上传的方式。

element-ui的upload上传组件，如果是多图上传，实际上在请求中为单个文件上传，只是提交方法中自循环，直至上传文件列表为空为止。

不多说上代码：

HTML：

<el-upload class="upload-demo" action="http://localhost:80" :limit='5' :auto-upload="false" :on-exceed='uploadOverrun' ref="upload" :http-request='submitUpload' :on-change='changeUpload'>
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

<el-button @click = 'submitAssess'>提交到服务器</el-button>

JS：

uploadOver

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

--erPang

关注关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
8
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue3 - 使用element-plus组件库el-upload上传超大mp4视频分片上传，Upload上传大文件mp4视频进行切片分段上传到后端服务器教程，vue3如何上传很大的视频（详细示例代码

高级前端工程师

03-08

1万+

vue3，element plus，el-upload，Upload上传组件，java分片上传，springboot，vue3+springboot大文件分段传递，大视频分段上传，vue3详细分片上传视频教程，使用element-plus上传组件如何实现大文件分片分段上传到服务器，vue3+element 分片上传分片下载功能实现，大文件分片上传，vue3如何实现特别大的文件分批切片上传并且带进度条，上传进度条，封装el-upload大文件分片上传、断点续传组件，断点续传，vue3把一个大视频分成多个小片

ElementUI实现多图片上传及回显功能

RE_Z002的博客

04-19

4621

ElementUI实现多图片上传及回显功能

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

Vue+Element-ui改造upload组件进行多文件一次上传

wal1415的博客

03-07

1万+

Element组件功能强大，扩展性也好，upload文件上传组件支持单文件上传，对于办公文件，头像等都有专门的解决方案，同时可以附加参数，并且也能进行多文件上传，但是这里的多文件上传是分多次请求发送到后台的，可能不符合大多数情况的需求。本次的需求是做故障报修模块，需要图片上传，并且是多文件一起上传，发一次请求搞定，这时需要对upload组件进行改造，放弃Element...

el-upload手动上传

热门推荐

晏紫苏_cc的博客

06-28

4万+

项目中用到的是上传头像，前端通过input[type="file"]来选择图片，给后端传递一个formData格式的数据，然后上传。代码如下：我写了个组件，参数如下： uploadType: 上传类型 width: 图片显示的宽度 height: 图片显示的高度 imgUrl: 如果之前有图片，图片的路径地址 getImgUrl: 在组件里上传成功之后，会得到图片路径的相关参数，该...

vue2.0 多图片上传组件（el-upload）

Sheep_WuYang的博客

11-20

885

el-upload封装的图片上传组件 <template> <div> <el-upload ref="elUpload" :action="uploadPath" :headers="headers" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-remove="beforeRemove"

element ui Upload 上传组件实现多图片上传，formData携带动态图片，formData实现JSON结构，按顺序排列图片，根据序号替换图片，图片文件附带标识

mrliucx的博客

04-21

2319

实现多图片上传，formData携带动态图片，按顺序排列图片，根据序号替换图片，图片文件附带标识需求思路formData转化为JSON结构代码单张图片上传（新增、编辑）逻辑多张图片上传（有顺序要求）代码（所用到的' _' 为lodash的引用，主要用于处理数据）需求携带参数请求接口时的formData需要转化为JSON结构按顺序显示的图片列表需要加上顺序标识单张图片上传，单张图片携带标识参数（新增，编辑）多张图片上传，多张图片携带顺序参数（新增，编辑）多张图片编辑后的位置关系以及后端需要接收的

element中upload进行多张图片和form表单信息上传，使用formData

qq_41908953的博客

08-26

1061

element中upload进行多张图片上传 <el-upload multiple class="upload-demo" action="a" :headers="headers" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList"

vue2项目封装el-upload组件图片上传及删除

Jolly_zhang的博客

10-13

895

vue2项目封装图片上传及删除组件

vue+element-ui+axios实现图片上传

10-16

在本文中，我们将深入探讨如何使用Vue.js框架结合Element-UI组件库和axios库来实现一个图片上传功能。Vue.js是一个轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化的能力，使得开发更加高效。Element...

element-ui upload组件实现多文件上传

黑山老妖的小站

12-04

7039

需求：我司要求实现多文件上传，且要求使用formData传递参数。环境：vue+element-ui+axios 实现： 1. 使用element-ui upload组件搭建上传文件页面，页面示例如下：代码如下： <template> <div> <el-upload :multiple="true" class="uploa...

关于element-ui的upload组件实现自动上传多张图片的功能

qwerewf的博客

08-30

2719

## 前言：最近产品经理有个需求就是用饿了么组件上传图片之后自动上传的功能，虽然前面一篇文章有写借用upload组件实现上传文件的功能，觉得实现上传图片的功能应该是小菜一碟没想到做到时候遇到了很大的一个坑。代码： <div class="upload-wrap" v-show="MType != 'Mview'" @click.stop="getIndex(everyindex,index,numindex)"> <el

Vue elementUI 上传文件功能

laoyaoshilaoyao的博客

02-05

181

上传文件功能：用户上传头像、图片及视频，用到的是Element ui 的ulplaod组件

elementui上传多张图片（可多选）

qq_55031668的博客

12-12

5367

elementui上传文件

【vue】element-ui 上传文件

晴朗的心情博客

09-16

420

文章目录前端前端 axios api设置 export function project_file_add(data) { return request({ url: '/api/project-file', method: 'POST', data }) } 自动上传 vue代码 <template> <div> <el-upload drag multiple :before-up

vue element-ui 文件上传

hugejihu9的专栏

12-11

393

文章来自：源码在线https://www.shengli.me/jquery/404.html

vue之element-ui文件上传

贵林之恋的博客

02-21

9812

对于文件上传，实际项目中我们的需求一般分为两种： 1. 对于单个文件的上传，直接上传到服务器；官网api：http://element-cn.eleme.io/#/zh-CN/component/upload <el-upload class="avatar-uploader" action="" :http-request="uploadimage" :before-upload="b.

VUE 使用 elementUI 实现文件上传

闪光向日葵战士

11-24

3543

文件上传，后台要求 file 二进制文件

vue+ElementUI文件上传

奈&何.

03-21

634

前端文件上传

vue3使用el-upload结合el-form手动上传图片到django

01-17

### Vue3 中使用 Element UI 的 `el-upload` 组件与 Django 后端配合实现手动上传图片 #### 前端设置为了在前端集成 `el-upload` 和 `el-form` 来完成文件上传操作，需确保安装并引入了必要的库： ```bash npm install element-plus axios vue@next ``` 创建表单组件时，定义一个用于存储待上传图像数据的对象。此对象作为双向绑定的目标，以便于收集用户输入的信息。 ```javascript // src/components/UploadImageForm.vue <template> <el-form :model="form">  <el-form-item label="上传图片" prop="image"> <el-upload ref="upload" action="" list-type="picture-card" :auto-upload="false" :on-change="handleChange" :file-list="form.imageList" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script setup> import { reactive } from 'vue'; import axios from 'axios'; const form = reactive({ imageList: [] }); function handleChange(file, fileList) { const formData = new FormData(); fileList.forEach(f => { formData.append('images', f.raw); }); } async function submitForm() { try { let formData = new FormData(); // 将所有选中的文件加入到FormData实例中 this.$refs.upload.submit().then((files) => { files.fileList.forEach(function (item) { formData.append("images", item.raw); }); await axios.post('/api/upload/', formData, { headers: {'Content-Type': 'multipart/form-data'} }).catch(error => console.error(error)); alert('上传成功'); }); } catch (error) { console.log(error.message); } } </script> ``` 上述代码片段展示了如何利用 `el-upload` 控件来捕获用户的文件选择动作，并通过自定义事件处理器将这些文件附加到 `FormData` 对象内[^2]。 #### 后端配置对于Django项目而言，除了常规的应用程序搭建外，还需特别注意媒体资源路径的设定以及视图函数的设计以接收来自客户端的数据流。 ##### 设置静态和多媒体文件路径编辑项目的 settings.py 文件，指定媒体文件保存的位置及其URL前缀: ```python # myproject/settings.py MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') ``` 这一步骤明确了服务器上实际存放用户上传资料的具体位置[^1]。 ##### 创建API接口处理上传逻辑编写专门负责接受HTTP POST请求并将接收到的内容写入磁盘的方法： ```python from rest_framework.views import APIView from rest_framework.response import Response from django.core.files.storage import default_storage class FileUploadAPIView(APIView): def post(self, request): file_obj = request.FILES.getlist('images') saved_files = [] for img in file_obj: path = default_storage.save(img.name, img) saved_files.append(path) return Response({'message': 'Files uploaded successfully.', 'paths': saved_files}) ``` 该类继承自 DRF 提供的基础视图基类 `APIView`, 并重写了默认行为以适应特定需求——即解析 multipart/form-data 类型的消息体获取其中携带的一个或多个二进制大对象（BLOB），再借助内置工具将其持久化至本地文件系统中去[^4]. 最后记得注册路由映射关系使得外部能够访问新建立的服务端点.