el-upload上传图片成功，详情页回显base64格式的图片

置顶 已于 2023-09-25 18:58:25 修改
阅读量3.7k 收藏 1
点赞数
分类专栏： JS实战记录 vue2实战记录 文章标签： vue.js 前端 javascript
于 2023-05-24 18:02:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635012/article/details/130852587
版权
本文介绍了在Vue.js应用中如何处理图片上传，以Base64格式回显于el-upload组件，并在详情页显示。当后端需要前端以特定格式发送图片数据时，前端需要在上传成功后将图片文件转换为Base64，再按需求格式组织成字符串。文章详细展示了如何处理文件数组，以及使用change事件回调进行Base64转换的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上传图片，并传给后端图片格式是base64。在详情页需要回显图片在el-upload上，我们发现官网里图片回显时，文件数组里要配置好name和url,如下图：
在这里插入图片描述
当我们需要回显base64格式的图片时，我们需要将要回显的文件数组处理成id和url才能回显，如下图：

      this.$refs.addModal.fileList = [
            {
   
              id:
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Element上传图片组件的使用方法及图片回显与Base64格式转换（前端开发）
SvqiAnaconda的博客
09-27 667
Element是一套基于Vue.js的组件库，提供了丰富的UI组件和工具，方便开发者快速构建Web应用程序。其中，Element还提供了一个上传图片组件，可以方便地实现图片上传和回显功能。本文将详细介绍Element上传图片组件的使用方法，并演示如何将图片回显与进行Base64格式转换。首先，确保你已经正确引入了Vue.js和Element组件库。接下来，我们将逐步进行操作。
Element-ui 中el-upload上传图片暂存，以及切换回显图片
weixin_41346436的博客
12-09 1907
效果图 DOM代码 <div class="uploadStyle" v-if="dataList[num].questionType != '单项选择题'" @click="upLoader"> <div v-for="(item3, index3) in dataList" :key="index3" class="UplaodBox"> <el-
el-upload 上传 base64 图片
Skellig
12-06 1465
el-upload 上传 base64 图片
图片处理：上传/删除/回显
最新发布
m0_59461654的博客
03-28 366
图片处理：上传/删除/回显 在页面点+号添加一张图，d:files对应文件夹下出现了图，立即点击图片上的删除图标，发现文件夹里的图也随之删除，并出现EL删除成功的提示消息。 在页面多了一个图片上传组件,选择图片上传后,在对应的磁盘日期目录下有以UUID重命名的图片文件。 上传一张图片,点击预览放大镜按钮,可以在页面显示后端返回的图片路径,图片也可以显示在页面上。
Element-plus之el-upload上传图片后回显，以及将回显的图片再次上传
Coin_Collecter的博客
02-03 7138
Element-plus之el-upload上传图片后回显，以及将回显的图片再次上传
【vue 项目】el-upload 上传文件以及回显照片和下载文件
热门推荐
Aohanzzz的博客
03-07 2万+
el-upload上传文件以及回显照片和下载文件
el-upload 回显处理(1:后端返回图片地址/2:后端返回base64格式)
m0_57364615的博客
01-18 3881
el-upload 回显处理
vue+el-upload 实现图片上传和回显
innogen7的博客
12-14 2650
使用vue+el-upload 实现图片上传，可浏览大图，可删除功能。
【Element-plus】vue选项式中使用el-upload上传图片并回显流程
m0_63143512的博客
04-28 1328
on-success：文件上传成功时的钩子，获取文件上传成功后返回的图片url。action：请求url，从后端那里获取。headers：请求头，可以配置权限。
el-upload使用http-request切片上传以及使用base64压缩图片展示缩略图
Sijin_Asu的博客
07-20 1195
el-upload使用http-request大文件切片上传以及使用base64压缩图片展示缩略图
el-upload 上传图片回显
weixin_59817492的博客
11-03 985
el-upload 上传图片回显
el-upload回显图片
m0_62159673的博客
01-07 927
父组件调用方法时让图片等于this.fileListRig，这样图片就能够回显了。当弹窗内容是在子组件时。需要点击父组件的编辑按钮，能够让弹窗的图片回显。
前端/el-upload回显图片
qq_18188377的博客
06-03 6251
问题回顾： 之前使用el-upload死活显示不出来图片，这次记录一下坑 解决 直接上代码 <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePicPreview" :on-success="handleFileSuccess" :on-rem
el-upload编辑时回显图片
Zzz_MxY的博客
01-11 9606
在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面 <el-form-item label="项目LOGO"> <el-upload ref="upload" :class="{hide:hideUpload}" drag action="#"
el-upload 图片回显，通过图片路径获取raw属性
SSS0821的博客
08-01 1608
el-upload 图片回显通过图片路径获取raw属性
elementui的Upload组件实现图片上传回显功能
weixin_49059194的博客
09-18 5491
阅读官网 发现主要通过filt-list来进行回显 要把后端的传回来的数据改为 有url的格式 如下图。图片回显后我们要对个别图片进行删除 主要是 :on-remove="handleRemove"this.detilData.item_image 就是我们传过去的数组。res.data.list.item_image 为接口返回的图片数组。他有两个参数 如果我们只需要把图片的url 都放在一个数组里，传给后端。我们在页面获取接口数据的地方 ，改为 有url的格式来进行回显。elementui官方文档。
vue3 el-upload单张图片回显、编辑、删除功能
ztwelve的博客
11-01 3226
单张图片上传后原位置回显，回显时隐藏上传区域，鼠标悬浮显示遮罩层进行编辑、删除操作，删除图片后显示上传区域
el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作
前端小知识
06-24 2092
el-upload上传图片用了2种方法一种是阿里云oss直接返回http链接去操作，一种是oss地址不通，用的后端返回文件流格式去处理
el-upload 上传图片、编辑时图片回显以及后续提交问题
night43的博客
05-27 2万+
功能描述： 添加图片 上传成功在表格内显示该图片 点击编辑，打开上传图片对话框，图片回显（与添加共用同一个对话框） html代码：（具体添加、编辑按钮以及表格内显示上传成功的图片html代码就不放了，这里只展示upload组件相关代码） <el-upload ref="ref1" action="" :file-list="fileList" list-type="picture-card"...
el-upload上传图片回显只有一个上传框
02-12
### 解决 `el-upload` 组件上传图片回显时显示多个文件的问题 为了使 `el-upload` 组件能够正确处理并显示多个已上传的图片，在设置 `file-list` 属性的同时还需要调整一些配置选项以及样式优化来避免页面闪动等...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值