这里只是本地上传,拿图片的base64,并不向后台直接上传,拿到base64后手动上传

上传前效果:

上传后效果:

.vue

  1.        <el-form-item label="礼品封面">
  2. <el-upload
  3. class="avatar-uploader"
  4. action=""
  5. :show-file-list="false"
  6. :auto-upload="false"
  7. :on-change="changeFile">
  8. <img id="giftImg" v-if="imageUrl" :src="data:imageUrl" class="avatar">
  9. <el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button>
  10. </el-upload>
  11. </el-form-item>

.ts

  1. changeFile(file, fileList) {
  2. var This = this;
  3. //this.imageUrl = URL.createObjectURL(file.raw);
  4. var reader = new FileReader();
  5. reader.readAsDataURL(file.raw);
  6. reader.onload = function(e){
  7. this.result // 这个就是base64编码了
  8. This.imageUrl = this.result;
  9. }
  10. }

有些东西就是试出来的,然后总结,~~~

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. Ajax跨域(jsonp) 调用JAVA后台

    1. JSONP定义    JSONP是英文JSON with Padding的缩写,是一个非官方的协议.它允许在服务器端生成script tags返回至客户端,通过javascript callba ...

  2. org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field xxx exceeds its maximum permitted size of 1048576 bytes.

    springboot 通过MultipartFile接受前端传过来的文件时是有文件大小限制的(springboot内置tomact的的文件传输默认为1MB),我们可以通过配置改变它的大小限制 首先在启 ...

  3. Percona-Toolkit工具包之pt-archiver

      Preface       There's a common case that we neet to archive amount of records in some tables to a ...

  4. Linux系统VPS主机SSH常用命令

    putty查询log文当里的"test"关键字 /home/iotserver/WebServer3_log# grep "test" log.log.bak2 ...

  5. linux后台程序开发常用工具

    linux开发工具: 1.编辑工具:1)sourceInsight2)Notepad++3)UltraEdit4)Altova XMLSpy 2.linux服务器访问工具:1)FileZilla2)X ...

  6. python线程与进程小结

    传统方式是调用2个方法执行1个任务,方法按顺序依次执行 # -*- coding:utf-8 -*- import threading import time def run(n): print('t ...

  7. 笨方法学python之import sys与from sys import argv的区别

    这是在网上看到的一个大神的解答: sys is a module that contains “system functionality”. sys.argv is a list containing ...

  8. 小程序开发-7-访问api数据与ES6在小程序中的应用

    访问API数据与ES6在小程序中的应用 看待组件的两种观点 组件复用 代码分离-(特别重要) 不能在一个页面写所有的代码,代码分离具有很强的可读性.可维护性 Blink Api 介绍与测试API ur ...

  9. git将本地项目上传到远程仓库

    1.cd mygit 打开项目文件夹 2.git init 初始化git 3.git remote add origin xxx(远程仓库地址)  添加远程库   git remote -v 查看远程 ...

  10. SIMD数据并行(四)——三种结构的比较

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...