vue element-ui upload多图片上传，提交表单时再上传，编辑回显再编辑

最新推荐文章于 2024-06-21 11:28:59 发布
原创 最新推荐文章于 2024-06-21 11:28:59 发布 · 1.8k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #elementui

本文探讨了在Vue.js应用中如何实现表单图片上传的控制，特别是如何阻止未提交时自动上传，以及在编辑模式下管理已上传图片。通过设置`auto-upload=false`防止自动上传，并利用`file-list`属性进行回显。关键在于验证上传成功图片的数量与fileList长度一致以确保所有图片上传完成才允许提交表单。同时，还详细介绍了编辑时如何更新和验证图片数据。

记录用upload过程中的想法，做这个效果的想法是不想还没提交表单就已经上传了很多图片到服务器

效果

这个是新增数据，表单的图片效果，右上角没有绿色勾，表示还没上传
在这里插入图片描述
前面两张图片是第一次添加的图片，是已经上传的
在这里插入图片描述

开始

:auto-upload=“false”,阻止它自动上传
:file-list=“bookForm.file”，编辑回显用的 ,等于file就行了,不需要再设置flieList

data数据

data不需要fileList,
在这里插入图片描述

方法

编辑时，如果添加新图或者删除图片，this.bookForm.file = fileList;做验证，编辑初始化时，也可以显示图片在这里插入图片描述
在这里插入图片描述

因为upload,多张图片上传，每次上传一张，on-success就调用一次，所以的做判断，上传成功的图片数量==fileList.length才能提交表单数据
在这里插入图片描述
点击提交时，做验证
在这里插入图片描述

编辑时获取图片数据
在这里插入图片描述

样式

在这里插入图片描述

Element-ui 中el-upload上传图片暂存，以及切换回显图片
weixin_41346436的博客
12-09 1946
效果图 DOM代码 <div class="uploadStyle" v-if="dataList[num].questionType != '单项选择题'" @click="upLoader"> <div v-for="(item3, index3) in dataList" :key="index3" class="UplaodBox"> <el-
vue3 -- el-upload（element-plus）封装APK 文件上传组件
最新发布
King Saj
11-18 71
APKUploader组件是一个基于Vue 3和Element Plus的APK文件上传解决方案。该组件支持APK文件校验（仅允许.apk格式，默认100MB大小限制）、实时上传进度显示、已上传文件回显与删除功能。 关键特性： v-model双向绑定支持 响应式布局，最大宽度300px 自定义上传逻辑，支持进度回调 集成Element Plus组件，提供一致UI体验 使用方式： 通过v-model绑定APK文件URL 依赖后端uploadFileApi（需支持进度回调） 提供表单集成示例和自定义样式方案 注
VUE+ELEMENTUI el-upload照片墙手动上传多张图片 保存和修改功能前后端完整实现
Young_yaru的博客
12-05 1万+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 VUE+ELEMENTUI el-upload照片墙手动上传多张图片 保存和修改功能前后端完整实现 el-upload照片墙上传的方式是，选择完一个文件后，就立马上传，而不是多个文件一块上传。这个细节在我写的时候没注意到，以至于时间被耗费，神经要抓狂。 将自动上传改为手动上传方式的话，就需要我...
vue+element 表单提交
cqqorcq的博客
03-17 1255
工作中我们经常会遇到表单提交，element中默认的文件上传是及时上传，很不方便，所以我们需要让上传的文件与表单的内容一起提交 在表单浮层中 <!-- 用户导入对话框 --> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept="
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
qq3892997的博客
11-10 3441
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
Vue+elementUI实现多图片上传与回显（含回显后继续上传或删除）
qq_36442061的博客
03-22 1万+
最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。 本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。 本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起...
el-upload 上传图片、编辑时图片回显以及后续提交问题
night43的博客
05-27 2万+
功能描述： 添加图片 上传成功在表格内显示该图片 点击编辑，打开上传图片对话框，图片回显（与添加共用同一个对话框） html代码：（具体添加、编辑按钮以及表格内显示上传成功的图片html代码就不放了，这里只展示upload组件相关代码） <el-upload ref="ref1" action="" :file-list="fileList" list-type="picture-card"...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
11-21
在本项目中，我们利用 Vue 和 Element UI 实现了一个多图片上传的功能，并且包含了图片回显、继续上传或删除图片的特性。以下是实现这一功能的关键知识点： 1. **Element UI 的图片上传组件**： - `el-upload` 是 ...
element-plus Upload组件加了v-model属性导致本地图片能回显，在服务器上图片不能回显问题
guilinfeng的博客
06-21 532
element-plus Upload组件加了v-model属性导致本地图片能回显，在服务器上图片不能回显问题
element-ui Upload 上传文件再编辑显示的两种方式
热门推荐
liaoxuewu的博客
10-30 3万+
1.直接将文件名以文本的方式展现 后台返回的链接以逗号的形式分隔，初始化定义一个数组：files: [] 页面结构： &amp;amp;amp;lt;el-upload class=&amp;amp;quot;upload-demo&amp;amp;quot; ref=&amp;amp;quot;upload&amp;amp;quot; :action=&amp;amp;quot;actionPath&amp;amp;quot;
vue-simple-uploader上传成功之后的response获取代码
12-28
我就废话不多说了，大家还是直接看代码吧~ [removed] export default { data () { return { options: { target: '//localhost:3000/upload', // '//jsonplaceholde
Vue使用Element-ui表单发送数据和多张图片到后端
lwj_0415的博客
03-28 6696
在做项目的时候遇到一个问题，前端需要上传表单到后端，表单数据包括文本内容和图片，后端我用的是Nodejs，效果类似下图 前端需要向后端传商品名称，价格，描述，商品图片 前端准备，利用Element-ui中的表单功能和上传功能，将upload代码嵌套在表单中，代码如下 <template> <div class="content"> <div class="form"> <el-form ref="form" :mode
vue-simple-uploader上传组件
weixin_45992894的博客
06-17 8842
vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种：支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传” 分块上传 支持进度、预估剩余时间、出错自动重试、重传等操作安装 使用 源码地址：https://github.com/simple-uploader/vue-uploader 案例：https://gitee.com/luck
封装 el-upload，实现可上传图片、预览图片、编辑图片、删除图片功能
qq_41775006的博客
02-01 1971
父组件 template <el-card> <div>上传图片子组件</div> <el-form label-width="100px"> <el-form-item label="图片："> <uploadImg :limit="5" :fileList="fileList" @submitImg="getImgLis
vue 实现表单和文件一起上传
Luminary7的博客
02-01 1281
vue 实现表单和文件一起上传
el-upload上传多张图片 可预览，图片上传做压缩element-ui
qq_45331969的博客
05-18 1636
项目里面涉及图片上传的功能，要图片可以预览，上传的时候图片大了要做压缩 图片上传以及预览 <Form-item label="图片详情" prop="imageUrl"> // Form-item 做了图片必传校验；不需校验不用写 <el-upload class="avatar-uploader" :action="action" // 必选参数，上传的地址 :headers="headers" list-type="picture-c
vue2+element-ui 实现文件上传和回显
tsfx051435adsl的博客
04-25 2万+
一、上传 <el-form-item label="上传图片"> <el-upload ref="upload" action :file-list="device.photo" :limit="2"...
VUE中使用el-upload不立即上传图片，待点击提交后才上传到本地文件夹
weixin_42966151的博客
12-14 6376
使用auto-upload属性，令图片不立即上传，但确能显示在前端一个缓存预览的效果，待页面刷新后，缓存预览的图片消失。只有点击了“提交”按钮后，图片才会保存到本地文件夹中，不会消失。
关于vue中使用组件elementui上传文件以及回显，删除图片、点击放大图片
m0_64115279的博客
11-01 3236
关于vue中使用组件elementui上传文件以及回显，点击放大图片
el-upload 同时上传图片和视频并回显
04-28
以下是使用Element UI的el-upload组件同时实现图片和视频上传及回显的完整解决方案： ### 一、组件实现方案 1. **双组件独立控制** 通过两个独立的el-upload组件分别处理图片和视频，每个组件设置不同的`accept`...
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值