这里只是本地上传,拿图片的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格式的更多相关文章

  1. 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...

  2. iOS 上传的图片在HTML上显示时,图片方向信息(EXIF Orientation)异常

    将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...

  3. WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞

    漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...

  4. .net core3.1 webapi + element-ui upload组件实现文件上传

    首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...

  5. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

  6. thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印

    今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...

  7. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  8. php 实现接收客户端上传的图片

    今天,遇到一个服务端接收客户端上传图片的需求,经过学习.我写了个简单的demo 以备下次学习. 首先服务器接收的发送图片的请求一定要是post请求,而且请求一定要加上 enctype="mu ...

  9. MVC&WebForm对照学习:文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

随机推荐

  1. QT基于model/view数据库编程2

    Qt中数据编程主要分为以下两点:1.利用qt提供类 访问数据库或者成为简单的数据库编程2.数据库编程中引入model/view编程模型 基于model/view数据库编程: qt提供model类: Q ...

  2. 牛客网NOIP赛前集训营-提高组18/9/9 A-中位数

    链接:https://www.nowcoder.com/acm/contest/172/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  3. <逆向学习第三天>手动脱FSG壳,修复IAT。

    其实对于简单的壳来说,脱壳常用的方法也无非是那几种,但是每种有每种的好处,具体使用那种方法视情况而定,我今天学习的这个壳很简单,但是重点在于修复IAT. 一.查壳: FSG 2.0的壳. 二.脱壳: ...

  4. Linux下通过uptime判断负载情况

    [root@localhost ~]# uptime 18:34:12 up 5:30, 1 user, load average: 0.00, 0.01, 0.05 load average后面的三 ...

  5. JavaScript鼠标事件

    mousedown 鼠标被按下. mouseup 鼠标按钮被释放(抬起). click 鼠标左键(或中建)被单击. 事件触发顺序:mousedown>mouseup>click>db ...

  6. 什么是mysql数据库安全 简单又通俗的mysql库安全简介

    首先我们要了解一下什么是mysql数据库,mysql是目前网站以及APP应用上用的较多的一个开源的关系型数据库系统,可以对数据进行保存,分段化的数据保存,也可以对其数据进行检索,查询等功能的数据库. ...

  7. DedeCMS V5.7sp2最新版本parse_str函数SQL注入漏洞

    织梦dedecms,在整个互联网中许多企业网站,个人网站,优化网站都在使用dede作为整个网站的开发架构,dedecms采用php+mysql数据库的架构来承载整个网站的运行与用户的访问,首页以及栏目 ...

  8. PHP.44-TP框架商城应用实例-后台19-权限管理-RBAC需求分析

    RBAC:Role Based Access Control:基于角色的访问控制 需求分析:[类似效果如下图] 1.权限,角色,管理员 2.权限管理[无限级] 注意:权限会被分配给角色,而不是给管理员 ...

  9. React16版本的新特性

    React16版本更新的新特性 2018年05月03日 21:27:56 阅读数:188 1.render方法的返回值类型:New render return types 之前的方式: class A ...

  10. Spring研磨分析、Quartz任务调度、Hibernate深入浅出系列文章笔记汇总

    Spring研磨分析.Quartz任务调度.Hibernate深入浅出系列文章笔记汇总 置顶2017年04月27日 10:46:45 阅读数:1213 这系列文章主要是对Spring.Quartz.H ...