file文件转为base64

简介: file文件转为base64

场景描述


在工作中,我们经常需要进行文件上传。


比如在进行图片上传的时候,


我们需要将上传的图片展示出来。


这个时候我们就需要将file文件转化为base64。


将file文件转化为base64


// 将file文件上传转化为base64进行显示
function getBase64(file) {
    return new Promise((resolve, reject) => {
        ///FileReader类就是专门用来读文件的
        const reader = new FileReader()
        //开始读文件
        //readAsDataURL: dataurl它的本质就是图片的二进制数据, 进行base64加密后形成的一个字符串,
        reader.readAsDataURL(file)
        // 成功和失败返回对应的信息,reader.result一个base64,可以直接使用
        reader.onload = () => resolve(reader.result)
        // 失败返回失败的信息
        reader.onerror = error => reject(error)
    })
}


使用


getBase64( file文件 ).then(res=>{
  //成功你做的事情
}).catch(err=>{
  //失败你做的事情
})
相关文章
|
监控 网络协议 API
阿里云BssOpenAPI是一个基于阿里云开放API的服务
【2月更文挑战第24天】阿里云BssOpenAPI是一个基于阿里云开放API的服务
556 6
|
1月前
|
移动开发 JavaScript API
Uniapp 与原生 App 集成时如何解决兼容性问题?
Uniapp 与原生 App 集成时如何解决兼容性问题?
447 136
|
前端开发 API
图片或文件Blob、File、Base64之间的相互转换
在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。 首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
802 1
|
2月前
|
监控 Java 关系型数据库
HikariCP 高性能数据库连接池技术详解与实践指南
本文档全面介绍 HikariCP 高性能数据库连接池的核心概念、架构设计和实践应用。作为目前性能最优异的 Java 数据库连接池实现,HikariCP 以其轻量级、高性能和可靠性著称,已成为 Spring Boot 等主流框架的默认连接池选择。本文将深入探讨其连接管理机制、性能优化策略、监控配置以及与各种框架的集成方式,帮助开发者构建高性能的数据访问层。
255 8
|
5月前
|
人工智能 搜索推荐 测试技术
通义灵码 Agent+MCP:打造自动化菜品推荐平台,从需求到部署实现全流程创新
通过通义灵码编程智能体模式和 MCP 的集成,开发者可以高效构建在线菜品推荐网站。智能体模式大幅提升了开发效率,MCP 服务则为功能扩展提供了无限可能。
|
7月前
|
前端开发 API 数据安全/隐私保护
从Curl到文档发布:Apipost让接口调试与文档协同更优雅
Apipost是一款提升开发者效率的工具,它将接口调试与文档生成无缝结合。通过三步工作流(从cURL导入请求、动态调试保存响应示例、自动化生成文档),解决传统流程中多平台切换导致的信息不一致问题。其核心优势在于数据同源和即时同步,减少文档维护时间,降低前后端沟通成本。某项目使用后,文档维护耗时从每周1.5小时降至10分钟。尊重开发者习惯,无需改变现有工作流,是优化API协作的理想选择。
|
人工智能 缓存 安全
阿里云服务器实例规格性能参考:从五代到八代及经济型e与通用算力型u1
阿里云不断推出新一代的云服务器实例规格,以满足不同用户的多样化需求。本文将介绍阿里云服务器从五代到八代的实例规格,以及经济型e和通用算力型u1这两种热门实例规格,帮助用户更好地选择适合自己的云服务器。
阿里云服务器实例规格性能参考:从五代到八代及经济型e与通用算力型u1
|
安全 Java Go
【Golang入门】简介与基本语法学习
Golang语言入门教程,介绍了Go语言的简介、基本语法、程序结构、变量和常量、控制结构、函数、并发编程、接口和类型、导入包、作用域以及错误处理等关键概念,为初学者提供了一个全面的学习起点。
415 0
|
关系型数据库 MySQL Serverless
函数计算操作报错合集之当遇到“Cannot read properties of undefined(reading 'props')”错误,该怎么处理
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
1458 0
|
Android开发 Kotlin
kotlin安卓开发【Jetpack Compose】:封装SnackBarUtil工具类方便使用
GPT-4o 是一个非常智能的模型,比当前的通义千问最新版本在能力上有显著提升。作者让GPT开发一段代码,功能为在 Kotlin 中使用 Jetpack Compose 框架封装一个 Snackbar 工具类,方便调用