vant 上传附件后回显_Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）...

最新推荐文章于 2024-04-19 11:20:00 发布
最新推荐文章于 2024-04-19 11:20:00 发布
阅读量1.6k 收藏 7
点赞数 1
文章标签： vant 上传附件后回显
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34638141/article/details/113547699
版权

最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。

本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。

本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档

需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传)，此时官方的示例就不满足我们的需求了。怎么办？当然是自己动手丰衣足食啦！！！

进入正题实现后以及上传保存成功后的效果如图

abda191862cfd9f341db171272194695.png

7cbb342fa5aa774cbfd1ccb378dde641.png

实现代码

5c9a41244ecd3a58028d0fa7b2de3f1f.png

这里有几个属性需要注意一下(敲黑板！！！)

因为本次采用手动上传所以需要把action属性置为空，

最低0.47元/天 解锁文章
谢小布
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant 上传附件后回显_vant上传文件到后端
weixin_39964819的博客
12-19 2080
最近在做手机版页面，采用的vant框架，这个上传控件和以前用iview、element有点不一样，iview、element都是直接提供后端接口文件会自动发送到后端，vant需要自己负责发送文件到后端，对于我这种面向百度编程人员还是有点难度。特意记一下，能帮到其他面向百度编程人员代码很简单，基本是使用文件构建FormData参数，如下：html代码:after-read="afterRead":b...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
主要介绍了Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
van-uploader上传图片后，再次编辑，回显预览
最新发布
weixin_42476586的博客
04-19 1096
通过插槽可以自定义上传区域的样式，将上传按钮写在需要的地方上传图片
vant图片上传和编辑时回显
m0_56896206的博客
09-03 2711
vant图片上传和编辑时回显 首先在html部分使用组件 定义添加删除事件 和最大上传数量 还有data的图片数组 <van-uploader @delete="deleteimg" :after-read="clickUpload" v-model="fileList" multiple :max-count="6" /> //deleteimg删除图片触发 //clickUpload上传完触发 //fileList数组 fileList:[], 然后开始写添加图片的事件 clickUp
formData 文件上传
weixin_43912401的博客
11-11 392
@TOCformData 文件上传 1 html中使用<input type=‘file’ ref=‘file’> 2 点击上传时 let file = this.$refs.file.files[0]; let formData = new FormData(); formData.append(‘file’, file); // 当最后数据上传时 所有的参数都应该为formData 格式 3 设置请求头 Content-Type: multipart/form-data 最后如果 form
vant uploader组件，回显文件、文件名
我的博客
11-29 1万+
效果： 刚开始的时候不回显文件名称，new了一个File，传入文件名就可以了 父组件 <van-field v-else name="gzsmwjys" label="故障说明文件(原始)" :required="gzsmwjysRequired"> <template #input> <!--把vant uploader封装成组件--> <VantUploader type="gzsmwjys"
element-ui upload 照片墙 照片回显
jiangjiang_ing的博客
04-02 1万+
<el-form-item label="海报" prop="invitationPosterUrl"> <el-upload :file-list="fileList" //这里要设置！！！ action="/admin/upload" list-type="pic...
基于jfinal+vue+ElementUI的前后端分离CRM系统.zip
03-23
基于jfinal+vue+ElementUI的前后端分离CRM系统 主要技术栈 核心框架：jfinal3.8 缓存：redis caffeine 数据库连接池：Druid 工具类：hutool,fastjson,poi-ooxml 定时任务：jfinal-cron 项目构建工具：maven ...
Vue+Vant 图片上传加显示的案例
01-22
前端开发想省时间就是要找框架呀！找框架！ vant中上传图片组件：https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader： *> ... //选择图片后执行 onRead(fi
vue +vant 适合手机端上传图片图片 实现了上传、压缩、旋转图片
01-20
在这个场景中，我们讨论的是如何在Vue和Vant的环境中实现手机端图片的上传、压缩和旋转功能。这在移动应用中尤其重要，因为用户通常使用手机摄像头拍摄图片，而这些图片可能由于设备方向或相机设置导致旋转问题。 ...
基于vue2.x + vant2.x 实现的仿微信 @ 功能.zip
05-18
功能描述：基于vue2.x + vant2.x 实现的仿微信@功能(稍作修改即可支持原生js和react)，兼容pc端和手机端，如有bug，欢迎提出~ 功能亮点 自定义弹窗样式及内容 动态绑定用户信息 兼容vue、react及原生js 兼容pc端和...
vue+el_upload实现文件上传的方式.doc
02-01
"Vue+el_upload实现文件上传的方式" 在Web开发中，文件上传是一个非常常见的需求。 Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的...
Vue + elementUI使用 upload 上传组件在照片墙中进行照片回显(把数据库中的照片拿出来再显示)
UserGuan的博客
04-10 4785
<template> <div> <el-dialog title="订单详情" :visible.sync="dialog" width="900px"> <el-form ref="form" :model="formData" size="small" :inline="true" label-width="110px"&g...
ElementUI图片上传 回显
热门推荐
lwx931449660的博客
03-18 1万+
html内容 <!-- 图片上传 --> <el-row> <el-col :span="24"> <el-form-item label="LOGO" prop="logoImg"> <el-upload class="up...
element-ui 上传图片回显
m0_74265396的博客
06-26 1397
获取到你的图片之后 转一下格式 在:file-list='img'更改你后面引号里的数据 就可以做到回显效果啦。的关键 有可能你的接口数据获取的是图片链接 没有办法直接在本地显示 在这里要做一个链接处理。如果点击多个会有多个照片 就在点击事件的时候设置一个空数组就好了。注意组件里的 :file-list='img' 这里 这里是。组件 已经接收数据 让图片回显。
(工作随记)VUE+ElementUI 照片墙上传回显 Base64转码
weixin_42722612的博客
11-19 2178
工作中需要做一个照片墙一样的东西，做出来的效果是这样的 官方文档在这里http://element-ui.cn/#/zh-CN/component/installation 下面是一些代码片段，可以参考一下 <el-dialog
 //第一张图片的样式 :visible="true"
 :title="dialogTitle"
 ...
vue+elementui上传图片&清空&回显
m0_69502730的博客
10-26 842
【代码】vue+elementui上传图片&清空&回显。
Vue开发实例之 $refs +vant的照片回显功能
m0_58565716的博客
02-03 546
无
vant4 上传图片回显
09-05
vant4 是一个基于 Vue.js 的移动端 UI 组件库，可以很方便地实现图片上传与回显的功能。 在 vant4 中使用上传图片回显的功能，主要涉及两个组件：Uploader 和 Image。 首先，在页面中引入 Uploader 组件，在其属性中设置 action 属性为图片上传的后端接口地址。例如： ```html <Uploader :action="uploadImgUrl" :limit="1" :before-upload="beforeUpload" @success="handleSuccess"> <div class="upload-btn">点击上传图片</div> </Uploader> ``` 其中，uploadImgUrl 是图片上传的后端接口地址，beforeUpload 方法用于在上传之前执行一些操作，handleSuccess 方法用于处理上传成功后的回调。 接下来，在 handleSuccess 方法中，可以获取到上传成功后的图片地址，然后将其赋值给一个变量，用于后续展示图片。例如： ```javascript data() { return { imageUrl: '' } }, methods: { handleSuccess(response) { this.imageUrl = response.data.url; } } ``` 最后，使用 Image 组件来展示回显的图片。在其属性中设置 src 属性为上述变量 imageUrl。例如： ```html <Image :src="imageUrl" /> ``` 这样，上传成功后的图片就可以在页面上进行回显了。 需要注意的是，vant4 的图片上传回显功能需要与后端接口配合使用，前端上传成功后，后端返回图片地址，在前端再将其赋值给变量，进行回显展示。另外，如果需要上传多张图片，可以根据需求调整 Uploader 组件的 limit 属性。 这就是使用 vant4 实现图片上传回显的简要步骤，希望能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值