beforeUpload (file) {
  var _this = this;
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    // 图片base64化
    var newUrl = this.result; //图片路径
    _this.imgUrl = newUrl;
  };
},

  或者 不使用element-ui中 upload的自动上传的话  可以在on-change事件里面 转换成base64的路径

handleChange (file, fileList, item) {
this.getBase64(file.raw).then(res => {
console.log(res);
});
},
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
}, //handleChange中 item是我的自定义参数

  

使用element文件上传图片转base64字节传到服务器的更多相关文章

  1. 客户端通过base64上传bitmap服务器

    首先致谢:http://www.jb51.net/article/129743.htm 咱们不是代码的生产者,只是代码的搬运工. 场景描述:Android客户端需要上传头像等图片到服务器,经双方协商决 ...

  2. 根据上传的MultipartFile通过springboot转化为File类型并调用通过File文件流的方法上传特定服务器

      @PostMapping("uploadExcel") public ResponseObj uploadExcel(@RequestParam("excelFile ...

  3. 怎么才能将文件流或者图片转化为base64,传到前台展示

    图片转化为base64,传到前台展示 public String getBase64(){ String imgStr = ""; try { File file = new Fi ...

  4. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  5. SecureCRT上传、下载文件 使用rz【上传】& sz【下载】命令

    首先安装:apt-get install lrzsz SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多了,而且服务器不用再开FTP服务了.rz,sz是便是L ...

  6. iOS 日志系统 本地日志打包上传到服务器

    日志系统主要包含两个部分 1.本地保存 我们知道NSLog打印的日志一般都是直接输出到控制台,开发人员可以在控制台直接看到实时打印的log,既然可以在控制台输出,那么能否将日志输出到其他地方呢,比如说 ...

  7. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  8. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  9. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  10. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

随机推荐

  1. 2023电赛E题代码

    openmv: import sensor, image, time from pyb import LED, UART #import lcd import json, ustruct class ...

  2. JDBC连接数据库增删改查实例

    查询所有 dao层代码: package example; import java.sql.Connection; import java.sql.DriverManager; import java ...

  3. Linux系统根分区满载清理

    问题说明 这里我们在使用centos7.6系统时,遇到根分区满载的问题.进入根分区后,查找了所有的目录,并没有查到大的文件.这里怀疑是文件删除未释放导致.由于系统根分区满载,执行lsof |grep ...

  4. 数栈技术分享:解读MySQL执行计划的type列和extra列

    一.解读type 执行计划的type表示访问数据类型,有很多种访问类型. 1.system表示这一步只返回一行数据,如果这一步的执行对象是一个驱动表或者主表,那么被驱动表或者子查询只是被访问一次. 2 ...

  5. 如何在FastAPI中玩转跨服务权限校验的魔法?

    title: 如何在FastAPI中玩转跨服务权限校验的魔法? date: 2025/06/24 08:23:40 updated: 2025/06/24 08:23:40 author: cmdra ...

  6. IDEA热布署报错java.lang.IllegalStateException: Restarter has not been initialized

    *************************** APPLICATION FAILED TO START *************************** Description: Bin ...

  7. Java MCP 实战:构建跨进程与远程的工具服务

    一.MCP 协议简介 MCP(Model Context Protocol,模型上下文协议)是由Anthropic推出的一种开放标准协议,旨在为大语言模型(LLM)与外部数据源.工具和服务提供标准化. ...

  8. windows镜像esd转iso

    背景 经常在三方网站(比如:修系统.不忘初心系统)下载到精简系统,但是这些系统的格式不仅仅是iso,还有可能是esd. 虽然两者几乎等价,但是有些平台 比如虚拟机.mac转换助理不能识别esd格式的镜 ...

  9. Visual Studio 现已支持新的、更简洁的解决方案文件(slnx)格式

    前言 解决方案文件是 Visual Studio 中用于组织和管理多个项目的文件,其后缀通常为.sln(基于 UTF-8格式的).它充当一个容器,维护着项目之间的引用关系.构建配置以及其他设置,定义了 ...

  10. ZYNQ -linux 上电设置默认静态IP地址

    在linux终端系统中,我们经常需要通过SSH等远程登录的方式对板卡进行调试,因此需要板卡上电后就设置一个静态IP地址. 下面给出方法: 在根文件系统目录下: 找到 /etc/network/inte ...