这里只是本地上传,拿图片的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. SAP常见问题与解决办法(转)

    1.A:在公司代码分配折旧表时报错? 在公司代码分配折旧表时报错,提示是“3000 的公司代码分录不完全-参见长文本” 希望各位大侠帮我看看.3000 的公司代码分录不完全-参见长文本 R: a.你把 ...

  2. 修改pytorch官方实例适用于自己的二分类迁移学习项目

    本demo从pytorch官方的迁移学习示例修改而来,增加了以下功能: 根据AUC来迭代最优参数: 五折交叉验证: 输出验证集错误分类图片: 输出分类报告并保存AUC结果图片. import os i ...

  3. lnmp+phpmyadmin+laravel 环境配置

    腾讯云 Ubuntu16.04 添加用户 useradd 与 adduser Ubuntu下useradd不会在/home下自动创建与用户名同名的用户目录,而且不会自动选择shell版本,也没有设置密 ...

  4. IT类职位常用缩写 SA SD RD PG PM DBA MIS QA Sales

    身为IT民工的基本常识,IT类职位常用缩写 SA (System Analyst) 系统分析师 在软体开发团队中,属于中高阶的基层管理者与领导者.除了须具备优秀的文字.语言沟通能力之外,还要有良好的分 ...

  5. 初识python 面向对象

    what the f**k!!这个知识点学不好的最大元凶就是,我还单身??? python基础(四): 面向对象的三个特点: 封装,继承,多态 类: 对象是面向对象编程的核心,在使用对象的过程中,为了 ...

  6. Table被web编程弃用的原因

    Table要比其它html标记占更多的字节. (延迟下载时间,占用服务器更多的流量资源.)Tablle会阻挡浏览器渲染引擎的渲染顺序. (会延迟页面的生成速度,让用户等待更久的时间.)Table里显示 ...

  7. PHP中的面向对象魔术方法大全

    1.__construct  构造方法 2.__destruct  析构方法 3.__get 获取成员值 4.__set 设定成员值 5.__isset 判断成员值 6.__unset unset成员 ...

  8. Make命令完全详解教程

    Make命令完全详解教程 无论是在Linux还是在Unix环境中,make都是一个非常重要的编译命令.不管是自己进行项目开发还是安装应用软件,我们都经常要用到make或make install.利用m ...

  9. uva 508 - Morse Mismatches(摩斯码)

    来自https://blog.csdn.net/su_cicada/article/details/80084529 习题4-6 莫尔斯电码(Morse Mismatches, ACM/ICPC Wo ...

  10. HyperLedger Fabric 1.4 区块链应用场景(3.1)

    比特币是区块链应用最早的场景,随着比特币安全稳定运行多年以后,数字货币的场景应用遍地开花,各种山寨币泛滥,通过ICO(Initial Coin Offering 首次币发行)就能融到大量资金,上市后的 ...