elupload base64

创作灵感也许就是这会儿还没有入睡吧,对接百度图片OCR功能,需要将图片转为BASE64上传调用百度的接口api,进行研究实现。页面如下,点击后选择图片文件后不是直接上传,而是获取图片的bytes数据!

 

<el-upload class="id-icon" v-model="attachment" action='' :on-change="getFile" :limit="1"list-type="picture" :auto-upload="false"><el-image class="idcard-view" :src="urlPath"></el-image>
</el-upload>

export default {data() {return {urlPath: require('@/assets/images/idBack.png'),}},created() {},methods: {getFile(file, fileList) {debuggerthis.urlPath = file.urlthis.getBase64(file.raw).then(res => {console.log(res)});},getBase64(file) {return new Promise(function (resolve, reject) {debuggerlet 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);};});},}
}
</script>

拿到图片base64编码数据后,进行后续的逻辑业务即可。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/238260.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Postman如何导入和导出接口文件

本文介绍2种导出和导入的操作方法&#xff1a;一种是分享链接&#xff0c;导入链接的方式&#xff08;需要登录&#xff09;&#xff1b;另一种是导出json文件&#xff0c;再次导入。下面将详细介绍。 由于第一种分享链接&#xff0c;导入链接的方式需要登录&#xff0c;所以推…

应用案例 | 基于三维视觉的汽车零件自动化拧紧解决方案

​Part.1 引言 随着人们生活水平的提高&#xff0c;汽车作为理想的代步工具&#xff0c;逐渐成为人们生活中不可或缺的一部分。汽车的广泛应用&#xff0c;大大增加了汽车制造业的负荷。因此&#xff0c;如何提高生产效率和汽车性能&#xff0c;成为汽车制造业的首要关注话题。…

算法题:求所需的最小的书包数量(拓展拓展再拓展~)

算法题&#xff1a;求所需的最小的书包数量 现在有一种书包&#xff0c;这种书包只有两个书槽&#xff08;即最多只能放下两本书。&#xff09;&#xff0c;并且一个这种书包只能装下N千克的书。现在有一个数组&#xff0c;数组元素是每本书的重量&#xff08;千克&#xff09…

RabbitMQ学习一

RabbitMQ学习 RabbitMQ相关概念Virtual host数据隔离SpringAMQP第一种 基本消息模型第二种 WorkQueues模型第三种 发布订阅模型&#xff08;fanout交换机&#xff09;fanout交换机实例 第四种 Direct交换机direct交换机实例基于注解的方式声明——direct交换机 第五种Topic交换…

从订阅式需求发展,透视凌雄科技DaaS模式增长潜力

订阅制&#xff0c;C端消费者早已耳熟能详&#xff0c;如今也凭借灵活、服务更新稳定的特点&#xff0c;逐渐成为B端企业服务的新热点。 比如对中小企业而言&#xff0c;办公IT设备等配套支出都必不可少&#xff0c;但收入本身并不稳定&#xff0c;购置大堆固定资产&#xff0…

Shell循环:for(三)

示例&#xff1a;使用for实现批量主机root密码的修改 一、前提 已完成密钥登录配置&#xff08;ssh-keygen&#xff09;定义主机地址列表并了解远程修改密码的方法 [rootlocalhost ~]# ssh-keygen #设置免密登录[rootlocalhost ~]# ssh-copy-id 192.168.151.151 二、演示…

【Linux系统化学习】揭秘 命令行参数 | 环境变量

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Linux系统化学习 代码仓库&#xff1a;Gitee 目录 命令行参数 环境变量 PATH 查看PATH $PWD 查看环境变量PWD $HOME 查看系统支持的环境变量 获取环境变量 命令行参数 在C/C编程语言中我们有一个…

用element-ui进行简单的商品管理

安装element-ui 项目的控制台输入npm i element-ui -S main.js import ElementUI from element-ui;//引入element-ui模块 import element-ui/lib/theme-chalk/index.css;//引入element-ui的css样式 Vue.use(ElementUI);//使用ElementUI 商品管理组件 <template><…

8、Qt中定时器的使用

一、说明 在Qt中常使用如下两种定时器 1、使用QObiect类的定时器事件QTimerEvent 与定时器相关的函数有&#xff1a;startTimer()、timeEvent()、killTimer()&#xff1b;startTimer(int interval)函数开始一个定时器并返回定时器ID&#xff0c;如果不能开始一个定时器&…

家政服务预约小程序系统的开发;

家政服务预约小程序系统的开发&#xff0c;既是对传统加盟服务模式的创新&#xff0c;也是家政商家企业营销推广服务的升级。它推动整个家政服务行业实现线上线下深度融合&#xff0c;提升用户消费体验&#xff0c;实现了雇主、服务提供者、家政企业商家三者之间的无缝衔接&…

go开发之个微机器人的二次开发

简要描述&#xff1a; 下载消息中的语音 请求URL&#xff1a; http://域名地址/getMsgVoice 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型…

【Node.js后端架构:MVC模式】基于expres讲解

Node.js后端架构&#xff1a;MVC模式 什么是MVC MVC (Model-View-Controller) 是一种软件设计模式&#xff0c;用于将应用程序的逻辑分离成三个不同的组件&#xff1a;模型、视图和控制器。 模型&#xff08;Model&#xff09;负责处理应用程序的数据逻辑。它负责从数据库或其…