这里只是本地上传,拿图片的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. Java的内存--存储

    0.参考资料: http://www.j2megame.org/index.php/content/view/2246/125.html 1.Java的内存机制 Java 把内存划分成两种:一种是栈内 ...

  2. leetcode笔记(八)263. Ugly Number

    题目描述 Write a program to check whether a given number is an ugly number. Ugly numbers are positive nu ...

  3. solr6.6教程-core的添加(二)

    1.什么是core core是solr的一个索引库,可以理解为一个数据库,core可以根据需要,创建多个. 2.创建core 首先进入到solrhome文件夹(D:\solrhome),创建一个文件夹 ...

  4. vue-cli+ webpack 搭建项目todolist

    本文接着之前的todolist例子,通过vue-cli + webpack 搭建项目:针对于vue-cli 2.x版本,更高版本找官网https://cli.vuejs.org/guide/insta ...

  5. 【HCNE题型自我考究】

      H3CNE题目归结 制定标准 组织: 802.1X协议起源于标准的无线局域网协议802.11.主要目的是为了解决有线局域网用户的接入认证问题. 426.一个包含有华为等多厂商设备的交换网络,其VL ...

  6. 数据库中pymysql模块的使用

    pymysql 模块 使用步骤: 核心类Connect链接用和Cursor读写用 1. 与数据库服务器建立链接 2. 获取游标对象(用于发送和接收数据) 3. 用游标执行sql语句 4. 使用fetc ...

  7. Python3 列表,元组,字典,字符串知识小结

    一.知识概要 1. 列表,元组,字典,字符串的创建方式 2. 列表,元组,字典,字符串的方法调用 3. 列表,元组,字典,字符串的常规用法 二.列表 # 列 表 # 列表基础 list_1 = ['a ...

  8. Django中的select_related与prefetch_related

      Django是一个基于Python的网站开发框架,一个很重要的特点就是Battery Included,简单来说就是包含了常规开发中所需要的一切东西,包括但不限于完整的ORM模型.中间件.会话处理 ...

  9. C# 控制台应用程序输出颜色字体

    最佳解决方案的代码: static void Main(string[] args) { Console.ForegroundColor = ConsoleColor.Green; Console.W ...

  10. Android开发——告诉你Adapter应该写在Activity里面还是外面

    0. 前言 本文转载自AItsuki的博客. 首先说明一下为什么要写这么一篇博客:最近看了一些其他人的项目,发现很多项目的做法是建立一个专门存放Adapter类的Package包,也有的项目干脆直接都 ...