el-upload怎么拿到上传的图片的base64格式

这里只是本地上传,拿图片的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="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;
    }
  }

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

时间: 2024-07-29 18:42:24

el-upload怎么拿到上传的图片的base64格式的相关文章

前端上传数据-图片和视频格式校验

上一篇用 promise 嵌套实现了按 excel 行顺序上传数据,这篇要解决的问题是图片和视频格式校验,图片主要有 jpg png gif 视频 mp4 由于用户选择的资源可能并不是真正的多媒体文件,使用 js 的 file.type 方法获取的文件类型可能不准确,比如将 .xlsx 改为 .jpg, file.type 得到的类型是image/jpeg 客户端拉取资源时,图片和视频的分辨率也一并获取,而上传由前端控制,所以上传时对资源要进行比较准确的判断. 我的判断策略: 判断文件后缀,若不

上传的图片转换 base64字符串 存入数据库

public String fileToStr(MultipartFile file) throws IOException{ bate[] data = null; InputStream is =  file.getInputStream(); data = new byte[is.available()]; is.read(data); is.close(); String encode = Base64.getEncoder().encodeToString(data); String

iview Upload组件多文件上传,以及vue文件下载

iview Upload组件多文件上传 系统经常遇到文件上传的问题,iview提供了Upload组建,能够很好的实现文件上传,当然一次上传多个文件也是允许的. 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before-upload ="handleUpload"等于false (1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式(自动上传模

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

今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载地址:https://github.com/Nintendov/Ueditor-thinkphp 下载下来,看着配置就可以了. 下面就是给上传图片加水印: (在做这步前,请确保ueditor已经正常工作) 我的工程目录如下: fonts里面的fz.fft为水印字体 images里面的logo.png为水印图片

dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

基于spring-boot的web应用,ckeditor上传文件图片文件

说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的配置图片文件上传功能,默认这个是没有开启的,就不用多说,ckeditor官网上也说的很清楚!http://docs.ckeditor.com 下面简单的说下配置(配置文件algoConfig.js): 1 CKEDITOR.editorConfig = function( config ) { 2

B/S----文件上传,图片水印,验证码

文件上传: //把相对路径变成绝对路径.string absolutePath = Server.MapPath(relativePath); FileUpload控件:    属性:        FileName:文件名        HasFile:bool 是否选中了文件        FileBytes:要上传文件的二进制数据    方法:        SaveAs(string 绝对路径):上传,另存为. 一.上传到硬盘文件夹(一)传单个文件    第一步:准备好文件及路径:   

php图片处理之图片转为base64格式上传

我们在开发系统时,处理图片上传是不可避免的,使用thinkphp的肯定很熟悉 import("@.ORG.UploadFile"); 的上传方式. 今天我们来讲一个使用html5 base64上传图片的方法. 其实就是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离IE,珍惜生命. 先扔个demo出来给大伙体验体验哈. http://t.lanchenglv.com/lan/index.php/Base64/images

ajax图片上传,图片异步上传,更新

继承前文:图片上传_ajax上传之实际应用(附上Demo) 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D