关于上传的图片-File,Base64,Blob之间的转换

base64转file

export  function base64toFile (dataurl, filename) {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, {type: mime})
}

file,Blob转base64

export const getBase64 = (img:any, callback: (url: string) => void) => {const reader = new FileReader();reader.addEventListener('load', () => callback(reader.result as string));reader.readAsDataURL(img as Blob);
};getBase64(img, (url) => { //第一个参数是通过上传,得到的file文件 如(file.originFileObj)console.log(url,'生成的base64')
});

记录请求file文件通过二进制流得到云图片


//需要将file转为formData 格式
export const formData = (data: any) => {const formData = new FormData()const entries = Object.entries(data)entries.forEach((item) => {if (item[1] && item[1] instanceof File) {formData.append(item[0], item[1])} else {// 当值为对象或数组的时候,把值字符串化const value =isObject(item[1]) || Array.isArray(item[1]) ? JSON.stringify(item[1]) : item[1]formData.append(item[0], value as string | Blob)}})return formData
}return request('/image_translate/image_to_url', {method: 'POST',data: formData({file: url}),//url为file,通过upload上传的就是 file.originFileObjheaders: {'Content-Type':'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',},});

记录前端获取oss图片转为base64

export async function getBlobTransitionBase64(url) {return request(url, {method: 'GET',headers: {'Cache-Control': 'no-cache',},responseType: 'blob',});
}

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

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

相关文章

arcgis api for js 中使用API的代理页面(跨越配置)

以下仅作为自己阅读官网api的对reques的理解做的备忘笔记。一知半解,仅供参考。 1、获取或者构建第三方代理 官网解释:代理在其自己的 Web 服务器上安装并运行,而不是在 Esri 服务器或安装了 ArcGIS Enterprise 的计算机上安装和运行&#…

(新手必看)自定义数据传输通信协议+STM32代码详解

前言 本篇博客主要学习和了解一些单片机协议的格式,在对传输大数据或者要求准确性的时候,都需要通过协议来发送接收,下面通过了解协议的基本构成和代码来分析和实现协议的发送和接收。本篇博客大部分是自己收集和整理,如有侵权请联…

机器学习-KL散度的直观理解+代码

KL散度 直观理解:KL散度是一种衡量两个分布之间匹配程度的方法。通常在概率和统计中,我们会用更简单的近似分布来代替观察到的数据或复杂的分布,KL散度帮我们衡量在选择近似值时损失了多少信息。 在信息论或概率论中,KL散度&#…

Java+Swing: 从数据库中查询数据并显示在表格中 整理11

分析:要想从数据库中查询数据并分页展示到表格中,我觉得应该按照这个思路:首先就是发起请求,此时需要向数据库中传递三个参数:当前页码(pageNum)、每一页的数量(pageSize&#xff09…

好用的API接口大汇总,含免费次数

AI绘画-Stable Diffusion:通过AI 生成图片,包括图生文、文生图等。AI绘画-Mid Journey:使用 Midjourney 目前全球领先的图片大模型,其能根据输入文字提供极其优秀的AI绘画作品。运营商三要素 API:输入姓名、身份证号码…

Java八股文面试全套真题【含答案】- AJAX Axios篇

AJAX 是什么?它的全称是什么? 答案:AJAX 是 Asynchronous JavaScript and XML(异步 JavaScript 和 XML)的缩写。它是一种用于在后台与服务器进行数据交换的技术,实现异步加载数据而无需刷新整个页面。AJAX …

TypeScript 第十一节:命名空间

一、命名空间 TypeScript 中的命名空间(Namespace)用于将代码组织到逻辑分组中。在 TypeScript 中,命名空间是一个独立作用域中的代码集合。 1、示例 下面是一个简单的 TypeScript 命名空间示例: namespace MyNamespace {export…

Knowledge Graph知识图谱—8. Web Ontology Language (OWL)

8. Web Ontology Language (OWL) 在RDFs不可能实现: Property cardinalities, Functional properties, Class disjointness, we cannot produce contradictions, circumvent the Non Unique Naming Assumption, circumvent the Open World Assumption 8.1 OWL Tr…

window下make无法识别,同时缺少mingw32-make.exe文件

解决方法:window下make无法识别,同时缺少mingw32-make.exe文件_无法将make项识别为cmdlet-CSDN博客

网工排查网络故障,有这两款软件就够了

网络工程师的工作中,排查网络故障占很大一部分。领导让你查网络故障,批量Ping几十台电脑,结果你Ping了一个小时还没好。你总不能说批量Ping就是这么慢吧? 所以,在这里介绍两款网络工程师常用的排查网络故障工具。 Qu…

K8S学习指南(2)-docker的基本使用

文章目录 引言安装 DockerDocker 基本概念1. 镜像(Images)示例:拉取并运行一个 Nginx 镜像 2. 容器(Containers)示例:查看运行中的容器 3. 仓库(Repository)示例:推送镜像…

知名火锅连锁企业,IT 团队如何在数千家门店中先于用户发现故障

该知名火锅连锁企业是中国领先的餐饮企业,上千家门店遍布全球,由于门店餐饮行业的特殊性,需要靠前部署服务,所以在每家餐厅中,会部署相应的服务器,及相应 IT 设备,本地会运行POS、会员、下单等业…

走方格的方案数

请计算n*m的棋盘格子(n为横向的格子数,m为竖向的格子数)从棋盘左上角出发沿着边缘线从左上角走到右下角,总共有多少种走法,要求不能走回头路,即:只能往右和往下走,不能往左和往上走。…

[NCTF2019]Fake XML cookbook1

提示 xml注入 一般遇到像登录页之类的就因该想到sql注入、弱口令或者xml等 随便输入抓包 这里明显就是xml注入 这里我们来简单了解一下xml注入 这里是普通的xml注入 xml注入其实和sql注入类似&#xff0c;利用了xml的解析机制如果系统没有将‘<’‘>’进行转义&#xff0…

u盘格式化和快速格式化的区别是什么?为您揭晓答案

在日常使用中&#xff0c;我们经常遇到U盘无法正常读取或存储数据的情况。这时候&#xff0c;格式化U盘成为一种常见的解决方法。然而&#xff0c;在格式化U盘时&#xff0c;我们面临两种选择&#xff1a;普通格式化和快速格式化。这两种格式化方式有什么区别&#xff1f;我们又…

Git 硬重置之后恢复历史提交版本

****硬重置之前一定要备份分支呀&#xff0c;谨慎使用硬重置&#xff0c;特别是很多人一起使用的分支**** 如果你在reset的时候选择了Hard选项&#xff0c;也就是硬重置 重置完且push过&#xff0c;那么被你本地和远端后面的提交记录肯定就会被抹去。 解决办法&#xff1a; …

【MAC】iStatistica Pro — 硬件性能状态监控工具

1、iStatistica Pro简介 iStatistica Pro (含iStatistica Sensors mac温度监控模块) 是一款非常漂亮的菜单栏mac系统监控工具。 他的功能包含&#xff1a;Mac 系统摘要&#xff0c;Mac电池信息&#xff0c;Mac网络监控&#xff0c;Mac温度传感器监控&#xff0c;Mac磁盘管理&a…

C/C++ 两数之和为目标值时返回下标

题目&#xff1a;给定一个整数数组nums和一个整数目标值target&#xff0c;在该数组中找出和为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 前提假设&#xff1a;每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。可以按任意…

物联网僵尸网络和 DDoS 攻击的 CERT 分析

在攻击发生当天早上&#xff0c;Dyn 证实其位于东海岸的 DNS 基础设施遭受了来自世界各地的 DDoS 攻击。这些攻击严重影响了 Dyn 的 DNS 客户的业务&#xff0c;更糟糕的是&#xff0c;客户的网站变得无法访问。这些攻击一直持续到美国东部时间下午13&#xff1a;45。Dyn在其官…

C语言学习----指针和数组

&#x1f308;这篇blog记录一下指针学习~ 主要是关于指针和数组之间的关系&#xff0c;还有指针的使用等~ &#x1f34e;指针变量是一个变量 其本身也有一个地址 也需要存放&#xff0c;就和int char等类型一样的&#xff0c;也需要有一个地址来存放它 &#x1f34c;而指针变量…