【Element】el-upload 上传图片转 base64 （使用 FileReader）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 567平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

原创最新推荐文章于 2026-02-08 01:18:28 发布 567 阅读 AI 写同款· GEO 优化 ›

el-upload上传图片成功，详情页回显base64格式的图片上传图片，并传给后端图片格式是base64。阅读详情

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

e.target.result 结果

收录于

Element

当前文章被收录于：

Element

27 篇文章 0 人学习

Element UI 相关

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vue.js #前端 #javascript #ecmascript #前端框架

element-upload 封装图片直接保存base64 2.上传的图片保存到base64，因为这个系统前端是对外，而系统是内网链接，所以外网无法访问到内网，需要把图片直接保存为base64。1.上传图片不立即调用上传接口。阅读详情

相关推荐

从零构建2.4G无线通信系统：MSPM0G3507与NRF24L01的深度协同设计

本文详细介绍了基于MSPM0G3507微控制器与NRF24L01射频模块构建2.4G无线通信系统的深度协同设计方案。内容涵盖系统架构、SPI通信优化、功耗管理、抗干扰机制及中断/DMA高效利用，为工业物联网应用提供高可靠、低功耗的无线传输解决方案。

rice5的博客 821

el-upload将上传的图片转为base64

elementui使用el-upload时将选择的图片转为base64格式,然后再上传。

收集、分享 3308

用CentOS 7安装cadence搭建适合IC Design的科研环境（四）——IC617、MMSIM151、calibre2015安装过程step by step

以下操作都在root权限下执行。建立安装目录建议把这种大型软件装在/opt目录下。mkdir -p /opt/cadence/installscape mkdir -p /opt/mentor/Calibre2015其中-p参数是直接建立父目录。因为IC617和MMISM151会自己建立安装目录，所以在这里没有建相关目录。而calibre则是默认安装在安装包所在的目录下，所以需要提前建立。解压安

maxwell2ic的博客 7万+

el-upload 组件取文件后base64格式直接上传

在 Element UI 的 el-upload 组件中，默认行为是在选择文件后立即上传文件。如果直接将文件以 base64 格式上传，你可以修改示例代码中的 handleBeforeUpload 方法，将文件转换为 base64 格式后直接进行上传。在上述示例中，将 auto-upload 属性设置为 true，以便在选择文件后立即进行上传。同时，我们将 base64 数据保存到 uploadData 对象中，并将其作为上传数据传递给 el-upload 组件的 data 属性。

Mr.Tang的博客 2523

遥感图像小白--2--图像分割

遥感图像分割基础入门

Mary的博客 4235

信号完整性SI-PI

SI设计的主要难点在于需要综合信号的幅度、噪声、边沿、延时等影响信号质量的多种因素，并且这种因素常常相互依赖、互相影响，交叉在一起。1.1、信号过冲（欠阻尼状态，可并联一个合适的电容）：过冲会造成强烈的电磁干扰，另一方面会损伤后面的电路的输入及，甚至失效。信号完整性SI：是指电路系统中信号的质量，如果在要求的时间内，信号能不失真的从源端传输到接收端。优点：提供较慢的上升时间，减少反系量，产生更小的EMI，从而降低过冲，增加信号质量。导线之间的间距过小，就会产生串扰，间距越小、串扰越大。

weixin_42304393的博客 4869

【Element-UI】ElementUI中el-upload上传文件转base64格式

【代码】ElementUI中el-upload上传文件转base64格式。

null 2597

【08】C#实战篇——C#调用C++ 动态库dll,报错 “无法加载DLL“xxx.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。”

摘要：本文详细分析了C#调用C++封装的DLL时出现“无法加载DLL”错误的排查与解决方法。通过案例演示，列举了常见原因（如平台不匹配、路径错误、依赖缺失等），并重点介绍了使用VS的dumpbin工具检测DLL依赖项的方法。最终定位问题为缺失依赖的LineApi.dll和opencv_world455d.dll，将其放入C#的exe目录后解决。文章还对比了C++与C#的报错差异，提供了通用解决方案，包括检查运行时库、环境变量等，帮助开发者高效解决类似问题。关键词： C#调用C++ DLL、dumpbin

程序员，他们想的是什么?他们想的永远都是技术，他们崇尚的也永远都是技术。 2098

Vue + Element UI 实现上传图片转base64及base64图片预览

目录功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览效果截图参考链接功能概述前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。在编辑数据或者查看详情时，需要预览图片。实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和

hequhecong10857的博客 1万+

CTF密码学奇技淫巧：当Base64遇到ROT13与Atbash

本文深入解析CTF竞赛中Base64、ROT13与Atbash的复合编码技术，提供Python实现与CyberChef可视化处理方案，帮助选手掌握密码学题目的解题技巧。通过NewStarCTF2025实战案例，对比脚本化与可视化工具的优劣，提升Web安全竞赛中的编码处理能力。

weixin_29001683的博客 508

可信数据空间关键技术和功能架构研究

可信数据空间（TDS）是实现数据安全共享的基础设施，通过数字合约和使用控制技术确保数据跨域流通的可信与安全。其架构包括服务平台和接入连接器，关键技术涵盖访问控制、隐私计算、区块链等。评估重点在于合规性、连接器能力、互联互通及安全体系。核心在于构建规则引擎而非简单数据汇聚，连接器开发比平台建设更重要。当前面临技术成本博弈、跨域身份互认等挑战，需平衡安全、性能与成本，推动数据要素市场发展。

逸尘的专栏 2223

elementui把上传的图片转为base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"> <el-button size="small"

1万+

C++ Qt6 qml CMakeLists.txt如何添加qrc文件

本文介绍了在Qt6项目中如何通过CMake管理QML图片资源。相比Qt5的qmake，CMake需要手动创建qrc文件并配置CMakeLists.txt。关键步骤包括：1）创建resources.qrc文件并添加图片资源；2）在CMakeLists.txt中设置CMAKE_AUTORCC为ON开启自动资源处理；3）使用qt_add_resources将qrc文件绑定到项目。配置完成后，可通过"qrc:alias"方式引用资源图片，解决了相对路径管理复杂的问题。

琅嬛福地 1453

el-upload 读取图片为Base64位数据

el-upload 读取图片为Base64位数据前端HTMLJS代码小编由于框架限制不能直接将图片上传到服务器，所有小编只能研究将图片转为base64位，虽然网上有很多的例子，但是最后还都是失败了，下面的代码是小编研究的结果，并且可以正常实现此功能，希望对后面的人有帮助。前端HTML <el-upload class="avatar-uploader" ref="upload" action="#" :show-fi

柳牧之的博客 4072

comtrade录波查看软件

comtrade录波查看软件 comtrade录波查看软件 comtrade录波查看软件 comtrade录波查看软件

Smartisan遮罩版 - v1.0.0.apk

el-upload上传图片获取该图片的base64编码

<el-upload action="#" :on-change="handleChangeUpload" list-type="picture-card" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> handleChangeUpload(file, fileList) { this.getBase64(file.raw).then(r

qq_35035975的博客 1300

基于改进YOLOv8的枣子图像分割系统源码与数据集分享_包含yolov8-seg-RepHGNetV2和yolov8-seg-AFPN-P345等50多种创新改进点_支持一键训练教.zip

el-upload组件自定义上传无法正常显示本地图片

[解决] el-upload组件自定义上传无法正常显示本地图片问题说明自定义图片上传方法，文件参数信息解决使用自定义方法参数信息中的参数对象问题说明在使用el-upload组件中通常会遇到请求不满足的情况或者需要接受参数，这时候我们就会用到自定义上传。而组件库在使用自定义上传的时候会覆盖默认的上传行为，导致我们不能对一些数据进行处理。文件转base64 自定义图片上传方法，文件参数信息使用自定义方法上传时，文件参数信息除了文件信息，还有一些方法参数解决使用自定义方法参数信息中的参数对象

HaHaTogether的博客 2056

ASP,NET源码——[新闻文章]NewsDig(新闻自动采集系统)源代码.zip

element-plus el-upload 上传图片转base64 字符串

el-upload上传图片转为base64格式及el-upload上传图片和文件到服务器

Daisy_ls的博客 3226

Vue实现上传图片转base64编码（案例详细步骤）

我们在写后台管理系统的时候，有时候需要上传图片，那么就要用到upload组件，刚好最近写项目遇到，记录一下效果展示点击按钮然后选择电脑里的图片，下面列表会进行图片的预览展示，提交表单便会提交图片的信息(通常是将图片转换成base64编码存入数据库中) 实现步骤 <el-upload list-type="picture" action='' accept=".jpg, .png" :limit="1" :auto-upload="false" :file-lis

weixin_45745641的博客 1万+

elementui 上传图片转base64

elementui 上传图片转base64 做项目的时候，遇到需要上传图片的需求，虽然已经做好了，但是想想PC端有时候也会遇到（这次是移动端的），所以就想到了用elementui搞一下，但是遇到了一个问题，后台接收图片的是base64的，所以这里需要把图片转成base64再上传， 1、使用elementui组件的时候，需要再on-change绑定一个方法来接收图片信息，auto-upload（是否立即上传图片）需要设置成false，例子中用的是手动上传 <el-upload class="

weixin_43294092的博客 1924

el-uplaod实现图片上传和base64转码

<el-upload list-type="picture" action='' accept=".jpg, .png" :limit="1" :auto-upload="false" :file-list="fileList" :on-change="getFile" :on-preview="handlePictureCardPreview" :on-remove="handleUploadRemove" > <el-button s...

qq_32998295的博客 1600

el-upload上传组件获取文件，file转为base64

nihaoweixiao1的博客 2547

vue+element 将图片压缩并转换成base64上传图片

一：我用的是具有拖拽功能的上传图片的组件： <el-form-item label="产品图片：" prop="pictureUrl" class="itemClass"> <el-upload class="avatar-uploader" drag :http-request="httpRequest" :action="upUrl" :show-fil...

u010227042的博客 1051

element 上传图片转base64

<el-upload list-type="picture-card" action="" :http-request="uploadFileFn" :show-file-list="false" :accept="mime" :on-change="getFile" ...

jyf_568的博客 186

Element-ui手动上传base64图片

<template> <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="getFileMsg"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"><.

yusha123的博客 656

element upload预览_vue element upload实现图片本地预览

vue使用element实现本地预览，最主要的是将图片路径转换为base64，供大家参考，具体内容如下HTMLclass="avatar-uploader"action="123" //这个路径不重要，可以随便写:show-file-list="false":on-success="handleAvatarSuccess":on-change="onchange":before...