这里只是本地上传,拿图片的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. luogu p2615神奇的幻方题解

    目录 题目部分 讲解部分 代码实现 题目部分 题目来源:洛谷p2615 题目描述 幻方是一种很神奇的 N*N矩阵:它由数字 1,2,3,⋯⋯,N×N 构成,且每行.每列及两条对角线上的数字之和都相同. ...

  2. ABAP术语-Data Browser

    Data Browser 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/21/1046858.html Tool for displayin ...

  3. 编译安装GCC

    下载GCC包 http://mirror.hust.edu.cn/gnu/gcc/ 解压 .tar.gzcd gcc-4.9.4./contrib/download_prerequisites #下载 ...

  4. 爬虫——json模块与jsonpath模块

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适用于进行数据交互的场景,比如网站前台与后 ...

  5. 汇编:模拟C语言实现break与continue

    ;=============================== ;循环程序设计 ;模拟C语言实现break 与continue DATAS SEGMENT i dw sum dw DATAS end ...

  6. mysql创建表时反引号的作用

    试用navicat工具查看现网mysql建表语句时,发现表名和字段名都是反引号引起来的 CREATE TABLE `tab_notice_title_tv` ( `i_id` ) NOT NULL A ...

  7. 深度剖析HBase负载均衡和性能指标

    深度剖析HBase负载均衡和性能指标 在分布式系统中,负载均衡是一个非常重要的功能,HBase通过Region的数量实现负载均衡,即通过hbase.master.loadbalancer.class实 ...

  8. C语言实例解析精粹学习笔记——42(插入排序)

    实例说明: 将一个整数数组按从小到大的顺序进行排序.(主要学习基本的插入排序和改进的冒泡排序的算法和应用) 思路1: 从第一个数据开始,分别比较其后的数据,若比它小,则将这两个数的位置交换:从第一个数 ...

  9. stm32+lwip(五):以太网帧发送测试

    我是卓波,很高兴你来看我的博客. 系列文章: stm32+lwip(一):使用STM32CubeMX生成项目 stm32+lwip(二):UDP测试 stm32+lwip(三):TCP测试 stm32 ...

  10. 解决 Python2 和 Python3 的共存问题

    首先安装两种版本的Python 进入系统属性更改环境变量 将两个版本的安装路径找出. 添加至PATH中,变量之间用分号隔开. D:\Python36\Scripts\;D:\Python36\;D:\ ...