el-upload怎么拿到上传的图片的base64格式
这里只是本地上传,拿图片的base64,并不向后台直接上传,拿到base64后手动上传
上传前效果:

上传后效果:

.vue
<el-form-item label="礼品封面">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:auto-upload="false"
:on-change="changeFile">
<img id="giftImg" v-if="imageUrl" :src="data:imageUrl" class="avatar">
<el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</el-form-item>
.ts
changeFile(file, fileList) {
var This = this;
//this.imageUrl = URL.createObjectURL(file.raw);
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function(e){
this.result // 这个就是base64编码了
This.imageUrl = this.result;
}
}
有些东西就是试出来的,然后总结,~~~
el-upload怎么拿到上传的图片的base64格式的更多相关文章
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- iOS 上传的图片在HTML上显示时,图片方向信息(EXIF Orientation)异常
将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...
- WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞
漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...
- .net core3.1 webapi + element-ui upload组件实现文件上传
首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...
- 【antd Vue】封装upload图片上传组件(返回Base64)
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
- thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印
今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...
- ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合
一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...
- php 实现接收客户端上传的图片
今天,遇到一个服务端接收客户端上传图片的需求,经过学习.我写了个简单的demo 以备下次学习. 首先服务器接收的发送图片的请求一定要是post请求,而且请求一定要加上 enctype="mu ...
- MVC&WebForm对照学习:文件上传(以图片为例)
原文 http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页:: :: :: ::管理 5 Posts :: 0 ...
随机推荐
- DISTINCT 去重仍有重复的分析
logger日志报错 插入数据时违反主键唯一约束 org.springframework.dao.DuplicateKeyException: ### Error updating database. ...
- Linux centos7 安装python3 及 GCC
1.用wget下载python源码 PYTHON下载 找适合自己的版本,我下载的是3.7.2 2.用tar命令解压下载的文件 tar -zxvf Python-3.7.2.tgz 3.进入目录解压后的 ...
- Angular-chart.js 使用说明(基于angular.js工程)
Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法: 分别将Chart.js.angular-chart.js.angular-c ...
- PHP如何实现99乘法表?
看到这个问题,可能大家更多的是考虑到用for循环,个人觉得使用for循环太影响程序性能.推荐使用递归处理. /** * Title : 递归实现99乘法表 * Author : Bruceqi * ...
- mongo数据库相关目录
mongodb的docker化安装 mongodb的windows系统下安装 grafana使用Prometheus数据源监控mongo数据库 mongodb副本集的docker化安装 mongodb ...
- redis之哨兵(Sentinel)
Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端都没有实现主从切换的功能. 而 ...
- 吐血分享:QQ群霸屏技术(初级篇)
QQ群,仿似一个冷宫;But,你真摒弃不起. 某人,坐拥2000多个2000人群,月收入10w+,此类人数少,皆因多年的沉淀,以形成完全的壁垒,难以企及的层次. 流量的分散,QQ群相对比较优质的地带, ...
- JavaSE 第二次学习随笔(五)
/* * 中文乱码出现的情况研究 * 注意点:乱码解决的办法是再编码再解码 * 但是如果是编码出错了,无法解决.如果是解码出错了,可以利用再编码再解码 * * * 编码 解码 结果 * GBK utf ...
- 51定时器控制4各led,使用回调函数机制
程序转载自51hei,经过自己的实际验证,多了一种编程的思路技能,回调函数的基本思想也是基于事件机制的,哪个事件来了, 就执行哪个事件. 程序中,最多四个子定时器,说明51的处理速度是不够的,在中断中 ...
- SPFA算法(2) POJ 1511 Invitation Cards
原题: Invitation Cards Time Limit: 8000MS Memory Limit: 262144K Total Submissions: 31230 Accepted: ...