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) {
            debugger
            this.urlPath = file.url
            this.getBase64(file.raw).then(res => {
                console.log(res)
            });
        },
        getBase64(file) {
            return new Promise(function (resolve, reject) {
                debugger
                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);
                };
            });
        },
    }
}
</script>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2012-2021年银行数字化转型程度数据(根据年报词频计算)

2012-2021年银行数字化转型程度&#xff08;根据年报词频计算&#xff09; 1、时间&#xff1a;2012-2021年 2、指标&#xff1a;银行名称、年份、数字化转型程度 3、范围&#xff1a;52家银行&#xff08;上海银行、中信银行、中国银行、交通银行、光大银行、兰州银行、兴业…

国标GBT 27930关键点梳理

1、充电总流程 整个充电过程包括六个阶段:物理连接完成、低压辅助上电、充电握手阶段、充电参数配置阶段、充电阶段和充电结束阶段。 在各个阶段,充电机和 BMS 如果在规定的时间内没有收到对方报文或没有收到正确报文,即判定为超时(超时指在规定时间内没有收到对方的完整数据包…

每日一练2023.12.2——正整数A+B【PTA】

题目链接&#xff1a;L1-025 正整数AB 题目要求&#xff1a; 题的目标很简单&#xff0c;就是求两个正整数A和B的和&#xff0c;其中A和B都在区间[1,1000]。稍微有点麻烦的是&#xff0c;输入并不保证是两个正整数。 输入格式&#xff1a; 输入在一行给出A和B&#xff0c;…

webGIS使用JS,高德API完成简单的智慧校园项目基础

代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…

MySQL5.7安装与配置:自动化一键安装配置

介绍 本文介绍了一个自动化安装MySQL的Shell脚本。该脚本可以帮助用户快速安装MySQL&#xff0c;并自动进行配置和初始化。通过使用该脚本&#xff0c;用户无需手动执行繁琐的安装步骤&#xff0c;大大简化了MySQL的安装过程。 使用shell自动化安装教程 1. 复制脚本 首先&a…

wordpress路径怎么优化?wordpress伪静态怎么做?

Wordpress这个程序是动态的&#xff0c;在后台中设置链接的格式为朴素&#xff0c;就可以了&#xff0c;这样简单又方便&#xff0c;因为百度对于路径的都是一样对待的&#xff0c;静态路径和动态路径&#xff0c;都是一样的对待。 有的时候&#xff0c;有的人会认为动态路径不…

2023年中国消费金融行业研究报告

第一章 行业概况 1.1 定义 中国消费金融行业&#xff0c;作为国家金融体系的重要组成部分&#xff0c;旨在为消费者提供多样化的金融产品和服务&#xff0c;以满足其消费需求。这一行业包括银行、消费金融公司、小额贷款公司等多种金融机构&#xff0c;涵盖了包括消费贷款在内…

网上选课系统源码(Java)

JavaWebjsp网上选课系统源码 运行示意图&#xff1a;

SqlServer_分页_OFFSET_FETCH

使用SQL server分页 使用SQL server分页的时候踩了一个坑&#xff1a; 用mybatis-plus分页的时候始终报错 代码&#xff1a;Page<SystemDictCatalog> page new Page<>(data.getPage(), data.getLimit()); QueryWrapper<SystemDictCatalog> wrapper new Qu…

java学习part29线程通信

139-多线程-线程间的通信机制与生产者消费者案例_哔哩哔哩_bilibili 1.等待唤醒 类似于golang的channel&#xff0c; 1.1用法 类似于go的wait()&#xff0c; 1.sleep和wait的一个重大区别是&#xff0c;sleep不会让线程失去同步监视器&#xff0c;而wait会释放 2.wait必须tr…

vqvae 论文阅读

https://arxiv.org/abs/1711.00937 直接3.1 首先我们定义一个嵌入空间. 是K*D维度的. K是离散空间向量的数量. D是每一个向量的维度. 所以e_i 中的i属于 1到K. 模型的输入是x, 也就是图片. 然后模型编码成一个z_e(x). 然后使用最近算法来得到 z_q 具体公式是下面1和2. 理解q这…

SHAP(四):NHANES I 生存模型

SHAP&#xff08;四&#xff09;&#xff1a;NHANES I 生存模型 这是一个 Cox 比例风险模型&#xff0c;基于来自 NHANES I 的数据以及来自 NHANES I 流行病学随访研究。 它旨在说明 SHAP 值如何能够以传统上仅由线性模型提供的清晰度解释 XGBoost 模型。 我们在数据中看到有趣…

制作一个RISC-V的操作系统一-计算机系统漫游

文章目录 计算机的硬件组成两种架构程序的存储与执行程序语言的设计和进化一个mini计算机 编程语言的进化存储设备的层次结构操作系统 计算机的硬件组成 所有硬件由总线连接起来 两种架构 总线个数不同&#xff0c;Memory储存内容不同 程序的存储与执行 首先编译和链接某…

第九节HarmonyOS 常用基础组件2-Image

一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类&#xff1a;基础组件…

确保软件安全性:在软件开发中的关键挑战与最佳实践

目录 引言 安全意识的重要性 软件安全性的挑战 漏洞和脆弱性 数据泄露 拒绝服务攻击 社会工程学攻击 软件安全性的最佳实践 安全的编程实践 安全审查与测试 数据加密和访问控制 网络安全措施 员工培训与安全意识 安全开发生命周期 结论 引言 在当今数字化时代&a…

《React 知识点》第一篇 大括号使用{}

简介 大括号 " {} "可以用于包裹JavaScript的表达式或语句。以便在jsx中动态生成内容。 插入变量与表达式 function expressionTest() {const name "变量测试";return (<p><div>{name}</div><div>表达式 210 {2 100}</div…

Java---接口讲解

文章目录 1. 接口概述2. 接口特点3. 接口成员特点4. 小案例应用5. 类和接口的关系6. 抽象类和接口区别 1. 接口概述 1. 接口是一种公共的规范标准&#xff0c;只要符合规范标准&#xff0c;大家都可以通用。Java中的接口更多的是体现在对行为的抽象。 2. 参考生活中的接口可以理…

【并发编程】什么是死锁?死锁如何解决?线上发生死锁应该怎么办?

&#x1f4eb;作者简介&#xff1a;小明Java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…

前端打包添加前缀

vue2添加前缀 router的base加上前缀 export default new Router({mode: history, // 去掉url中的#base: privateDeployUrl, // 这里加上前缀scrollBehavior: () > ({y: 0}),routes: constantRoutes })vue.config.js&#xff0c;publicPath属性加上前缀 publicPath: proces…

大数据Doris(三十二):Doris高级功能

文章目录 Doris高级功能 一、​​​​​​​表结构变更