elementui 上传图片转base64
elementui 上传图片转base64
做项目的时候,遇到需要上传图片的需求,虽然已经做好了,但是想想PC端有时候也会遇到(这次是移动端的),所以就想到了用elementui搞一下,但是遇到了一个问题,后台接收图片的是base64的,所以这里需要把图片转成base64再上传,
1、使用elementui组件的时候,需要再on-change绑定一个方法来接收图片信息,auto-upload(是否立即上传图片)需要设置成false,例子中用的是手动上传
<el-uploadclass="upload-demo"ref="upload"action=""accept=".jpg,.jpeg,.png,.JPG,.JPEG":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":auto-upload="false":http-request="handleHttpRequest":before-upload="beforeUpload":on-success="handleAvatarSuccess":on-error="handleAvatarError":on-change="getFile"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div></el-upload>
2、on-change文件状态改变时,就会调用 getFile(file, fileList) 方法,参数file下会有一个raw属性,file.raw对应的就是文件的内容
getFile(file, fileList) {console.log(file);this.getBase64(file.raw).then(res => {console.log(res)});}
3、因为图片转base64需要 FileReader 这个API,但是这个API貌似不能return,所以就用 promise 封装了一下,也有另外一种方法,再data定义一个变量去接收转换成的base64,上代码
getFile(file, fileList) {console.log(file);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);};});}
elementui 上传图片转base64相关推荐
- 前端vue+element-ui上传图片至七牛,并返回外链URL至后台
前端vue+element-ui上传图片至七牛,并返回外链URL至后台 上传文件到七牛云 代码 2019/08/12 上传文件到七牛云 注册登陆到七牛云,需要认证信息才能创建个人存储空间; 注册等步骤 ...
- vue+elementUI上传图片
vue+elementUI上传图片笔记总结 有裁剪框 上传图片组件: <template slot="iconForm"><el-uploadclass=&quo ...
- element-ui 上传图片后清空图片显示
element-ui 上传图片后清空图片显示 使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成 ...
- Vue+Element-UI 上传图片,打开相机,相册
Vue+Element-UI 上传图片,打开相机,相册 Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是 ...
- Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹 前言 一.Vue 前端 一.五 注意!!! 二.Springboot 后端 引入Base64依赖 在项目里新建 ut ...
- Vue Element-ui上传图片踩坑
Element-ui上传图片踩坑 使用Element-ui组件上传图片时,使用自带的action发起上传请求时碰到400错误 错误代码 <el-uploadclass="upload- ...
- 改造vue-quill-editor: 结合element-ui上传图片到服务器
前排提示:现在可以直接使用封装好的插件vue-quill-editor-upload 需求概述 vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时 ...
- element显示服务器的图片,使用element文件上传图片转base64字节传到服务器
beforeUpload (file) { var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); r ...
- element-ui 上传图片,图片404
介绍背景: 使用element-ui vue,在页面中填写商品信息并保存后,上传商品相关图片.图片存放到阿里云上.如上传两张图片,图片命名为goodsId-01.jpg和goodsId-02.jpg ...
最新文章
- python绘制剖面图_干货!告诉你详细的剖面图绘图方法和步骤
- Java学习记录-3.类的复用
- 基于Walle的多渠道快速打包自动脚本
- Poj3261 Milk Patterns
- C# 使用Microsoft.Office.Interop将Excel、Word转换成PDF遇到的问题总结
- C#后台调用前台js(RegisterStartupScript)
- Compact Normal Storage for Small G-Buffers
- Unity 项目 - Ruby‘s Adventure 学习笔记
- Ruby小白入门笔记之Rubymine工具的快捷键
- java二维码生成代码_java快速开发平台功能特点之代码生成器
- Ubuntu下Postfix邮件服务器安装及基本的设置
- jQuery - 选择器(五)
- TTC - Building a Better Vocabulary
- 红旗Linux 网卡bond,Linux双网卡绑定一个IP的实现
- 极化SAR数据超像素分割和密度峰值聚类
- netty 原理分析
- Baker Tilly与RGL Forensics宣布合并
- 【云宏大讲坛】超融合,融合的不仅是基础架构
- 数字签名与数字证书技术简介(二)
- angular ts 表格_Angular8 ui-grid替代方案ag-grid入门
热门文章
- iPhone通讯录号码不见了怎么恢复
- 正则表达式对qq号码进行校验
- [转]公司网管员未来职业规划
- 工业实时数据库的SQL异步查询
- [DBNETLIB][ConnectionOpen(connect()).]SQL Server 不存在或拒绝访问解决方方法
- php分页实例,php分页代码简单实现教程
- 黑龙江大学软件测试实验报告
- java毕业生设计装修网站计算机源码+系统+mysql+调试部署+lw
- python怎么表达我喜欢你_如何用含蓄的话表达我喜欢你 含蓄表达我喜欢你的句子大全...
- VC调试程序输出First-chance Exception.