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. 邮件收件、读取邮件API-批量导入-支持代理-开放HTTP接口

    简介 大恩邮箱收件平台,支持读取收件箱.垃圾箱的邮件.支持批量导入各大邮箱平台的账号(例如微软.谷歌.网易.QQ等),采用pop3.imap协议收件,支持配置代理IP.验证码截取规则等,同时提供了HT ...

  2. 1 分钟生成架构图?程序员 AI 绘图保姆级教程

    大家好,我是鱼皮.作为一名程序员,画图可以说是工作中的家常便饭了.无论是给领导汇报时画架构图.还是写文档时画流程图.或者头脑风暴时画思维导图,画图能力直接体现出我们的专业水平. 以前画图需要自己费时费 ...

  3. Hexo-butterfly 接入腾讯混元大模型自动生成文章摘要(保姆教程)

    1.注册腾讯云账号 首先必须要有一个腾讯云的账号,没有的话在官网注册一个,注册完成之后,进行实名操作. 接下来,在产品中心搜索腾讯混元大模型,点击产品控制台进入,在模型广场选择自己想要的大模型 (复制 ...

  4. etcd详细介绍

    一.etcd介绍 etcd是一个分布式.可靠的key-value存储的分布式系统,它不仅仅可以用于存储,还提供共享配置和服务发现.这里提供配置共享和服务发现的系统较多,比较常用的有zookeeper. ...

  5. kards卡组推荐——苏美隐蔽

    声明:此卡组抗快能力极差,害怕炮兵和小飞机为中后期 隐蔽核心思路: 在第一回合,尽量找杜斯团,找不到如果对方有单位,可以打一个镰刀 第二回合,①有杜斯团:打出隐蔽单位,按隐蔽顺序(附1)出,如果只有1 ...

  6. 倒带ChunJun,同心前行|2022年度回顾&2023年共建规划

    ChunJun是一个开始于2018年的批流一体数据集成框架项目,原名FlinkX.2022年2月22日,在FlinkX进行初版开源的整整四年后,技术团队决定对FlinkX进行整体升级,并更名为Chun ...

  7. 你必须知道的容器日志 (2) 开源日志管理方案 ELK/EFK

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.上一篇<你必须知道的容器日志(1)>中介绍了Docker自带的log ...

  8. [CSP-S 2022] 星战

    link 我为什么会在赛时想图论分块.... 什么神仙会想到哈希维护啊 首先手玩一下满足条件的图,只需要满足条件二:所有点出度为 1,条件 1 会自然满足,我们必然可以顺着其出边走下去. 对于操作 2 ...

  9. 使用 cursor 来 review 代码

    使用 cursor 来 review 代码 前言 code review review 单个文件 针对提交进行 code review 总结 使用 cursor 来 review 代码 前言 curs ...

  10. docusaurus默认访问地址前缀 以及多实例

    前言 默认情况下 所有的md文档 都应该以docs为根目录. you-project |--docs |--test.md 而访问路由 也是默认的http://localhost:3000/docs/ ...