uniapp 上传 base64 图片

在图片裁剪时候返回的是base64文件 需要上传到obs一般出现在h5网页端

可以直接使用 js 原始解决 应该只可以在h5浏览器内使用

// 提取 Base64 编码部分
const base64Data = e.tempFilePath.replace(/^data:image\/(\w+);base64,/, "");
// 将 Base64 编码转换为 ArrayBuffer
const binary = atob(base64Data);
const array = [];
for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));
}
const buffer = new Uint8Array(array).buffer;
// 创建一个 Blob 对象
const blob = new Blob([buffer], { type: 'image/png' });
// 创建一个 URL 指向 Blob 对象
let url =URL.createObjectURL(blob);//这里会把base64变成一个png图片的临时地址,后面就可以上传了
console.log(url);

使用 image-tools 工具,可用于 uni-app、微信小程序、5+APP、浏览器(需允许跨域)。

第一步: 安装

npm i image-tools --save

第二步:引入

npm i image-tools --save
或者下载后按包引入
// 以下路径需根据项目实际情况填写
import { pathToBase64, base64ToPath } from '../../js/image-tools/index.js'

第三步:使用

pathToBase64
从图像路径转换为base64,uni-app、微信小程序和5+APP使用的路径不支持网络路径,
如果是网络路径需要先使用下载API下载下来。

pathToBase64(path).then(base64 => {console.log(base64)}).catch(error => {console.error(error)})

base64ToPath
将图像base64保存为文件,返回文件路径。

base64ToPath(base64).then(path => {console.log(path)}).catch(error => {console.error(error)})

多并发使用优化
可以利用promise来串行和并行的执行多个任务

// 并行
Promise.all(paths.map(path => pathToBase64(path))).then(res => {console.log(res)// [base64, base64...]}).catch(error => {console.error(error)})
// 串行
paths.reduce((promise, path) => promise.then(res => pathToBase64(path).then(base64 => (res.push(base64), res))), Promise.resolve([])).then(res => {console.log(res)// [base64, base64...]}).catch(error => {console.error(error)})

小伙伴们记得点赞收藏哦~~~

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vsftp 修改端口 限制用户登录 开启防火墙 pasv模式

安装设置开机启动 yum -y install vsftpd systemctl start vsftpd systemctl enable vsftpd 修改配置&#xff0c;追加端口号到最后一行 vim /etc/vsftpd/vsftpd.conf listen_port5510 编辑 /etc/services 文件&#xff0c;将其中的三行端口改成5510 vim /etc/services ftp …

IntelliJ IDEA插件开发-代码补全插件入门开发

使用IntelliJ IDEA想必大家都有使用过代码自动补全功能&#xff0c;如输入ab&#xff0c;会自动触发补全&#xff0c;提供相应的补全建议列表。作为有追求的程序员&#xff0c;有没有想过这样的功能是如何实现的&#xff1f;本节将详细介绍如何实现一个类似的代码自动补全插件。…

❤React-React 组件基础(类组件)

❤React-React 组件基础 1、组件化开发介绍 组件化开发思想&#xff1a;分而治之 React的组件按照不同的方式可以分成类组件&#xff1a; 划分方式一&#xff08;按照组件的定义方式&#xff09; 函数组件(Functional Component )和类组件(Class Component)&#xff1b; …

Python →爬虫实践

爬取研究中心的书目 现在&#xff0c;想要把如下网站中的书目信息爬取出来。 案例一 耶鲁 Publications | Yale Law School 分析网页&#xff0c;如下图所示&#xff0c;需要爬取的页面&#xff0c;标签信息是“<p>”&#xff0c;所以用 itemssoup.find_all("p&…

机器学习: LightGBM模型(优化版)——高效且强大的树形模型

LightGBM&#xff08;Light Gradient Boosting Machine&#xff09;是一种基于梯度提升决策树&#xff08;GBDT&#xff09;的框架&#xff0c;由微软提出。它具有高效的训练速度、低内存占用、支持并行和GPU加速等特点&#xff0c;非常适合大规模数据的训练任务&#xff0c;尤…

《内存函数》

内存函数 1. memcpy函数 &#xff08;1&#xff09;介绍 这里通过memcpy的定义我们可以看这个函数包含三个参数&#xff0c;destination就是拷贝的目的地&#xff0c;source就是拷贝的源头&#xff0c;num就是拷贝的个数。 &#xff08;2&#xff09;使用 这里要包含头文件s…

不泄密的安全远程控制软件需要哪些技术

在数字化浪潮中&#xff0c;远程控制软件已不再是简单的辅助工具&#xff0c;而是成为企业运作和日常工作中不可或缺的一部分。随着远程办公模式的广泛采纳&#xff0c;这些软件提供了一种既安全又高效的途径来管理和访问远端系统。无论是在家办公、技术支持还是远程教育&#…

Pycharm打开终端时报错:Cannot open Local,Failed to start[powershell.exe]

问题如下&#xff1a; 解决办法&#xff1a; 修改设置中的shell path路径 英文版pycharm&#xff1a;file -> settings -> Tools -> Terminal -> Shell path 中文版pycharm&#xff1a;文件 -> 设置 -> 工具 -> 终端 -> Shell路径 将Shell路径不全 …

15分钟学 Go 第 51 天 :通用库与工具使用

第51天&#xff1a;通用库与工具使用 一、学习目标 类别工具/库用途命令行工具cobra构建命令行应用JSON处理gjson高效JSON解析HTTP客户端restyHTTP请求处理日期处理carbon时间日期操作配置管理viper配置文件处理 二、详细实现 让我们通过具体示例来学习这些库的使用&#x…

基于微信小程序的乡村研学游平台设计与实现,LW+源码+讲解

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…

VLC-QT----Linux编译并运行示例

linux:ubuntu 16.04 qt:5.13.2 总体安装步骤 下载安装,编译 下载源码仓库,下载cmake,新建一个build文件夹,cd进去,执行代码 cmake .. -DCMAKE_BUILD_TYPEDebug 遇到报错,没有qt5Coreconfig,运行 sudo apt-get install qtdeclarative5-dev进行安装 遇到报错 Could not fi…

机器学习:XGBoost模型——高效且强大的树形模型

XGBoost&#xff08;Extreme Gradient Boosting&#xff0c;极端梯度提升树&#xff09;是一种强大的梯度提升算法&#xff0c;在现实中被广泛用于分类和回归任务。它通过集成多个简单的基学习器&#xff08;通常是决策树&#xff09;来构建一个强大的预测模型。 基本原理步骤…

爬虫开发工具与环境搭建——开发工具介绍

第二章&#xff1a;爬虫开发工具与环境搭建 第一节 开发工具介绍 爬虫开发需要一些合适的工具和框架来高效地抓取网页数据。在这节中&#xff0c;我们将介绍常用的开发工具&#xff0c;帮助开发者快速搭建爬虫开发环境。 1. Python与爬虫框架选择 Python因其简洁、易学的语法…

python高级之面向对象编程

一、面向过程与面向对象 面向过程和面向对象都是一种编程方式&#xff0c;只不过再设计上有区别。 1、面向过程pop&#xff1a; 举例&#xff1a;孩子上学 1. 妈妈起床 2. 妈妈洗漱 3. 妈妈做饭 4. 妈妈把孩子叫起来 5. 孩子起床 6. 孩子洗漱 7. 孩子吃饭 8. 妈妈给孩子送学校…

通过Docker实现openGauss的快速容器化安装

容器安装 本章节主要介绍通过 Docker 安装 openGauss&#xff0c;方便 DevOps 用户的安装、配置和环境设置。 支持的架构和操作系统版本 x86-64 CentOS 7.6 ARM64 openEuler 20.03 LTS 配置准备 使用 buildDockerImage.sh 脚本构建 docker 镜像&#xff0c;buildDockerIm…

康谋分享 | 确保AD/ADAS系统的安全:避免数据泛滥的关键

为确保AD/ADAS系统的安全性&#xff0c;各大车企通常需要收集、处理和分析来自于摄像头、激光雷达等传感器的数据&#xff0c;以找出提高系统安全性和性能的方法。然而在数据收集过程中&#xff0c;不可避免地会出现大量无价值数据&#xff0c;造成数据泛滥的情况&#xff0c;进…

电工电子原理笔记

这一篇手记会记录我硬件开发过程中遇到的一些底层电学原理&#xff0c;并且结合实际场景作为“例题”&#xff08;出于篇幅和保密考虑会进行部分简化&#xff09;。 叠加定理 基本介绍 在线性电路中&#xff0c;任一支路的电流&#xff08;或电压&#xff09;可以看成是电路…

【赵渝强老师】MySQL InnoDB的段、区和页

MySQL的InnoDB存储引擎的逻辑存储结构和Oracle大致相同&#xff0c;所有数据都被逻辑地存放在一个空间中&#xff0c;我们称之为表空间&#xff08;tablespace&#xff09;。表空间又由段&#xff08;segment&#xff09;、区&#xff08;extent&#xff09;、页&#xff08;pa…

Python 继承笔记

知识点&#xff1a; 1.has a 一个类中使用了另外一种自定义类的类型 student 使用computer book 2.类型 系统类型 str,int,float,list,tuple,dic,set 自定义类型 算是自定义的类&#xff0c;都可以将其当成一种类型 student是一种类型 sStudent() s是Student的类型 class Stud…

Vue3 -- 项目配置之husky【企业级项目配置保姆级教程4】

引言&#xff1a; eslint&#xff1a;代码规范校验prettier&#xff1a;代码格式化stylelint&#xff1a;CSS代码校验 上述三篇文章集成配置完成代码校验工具&#xff0c;当时需要每次手动的去执行命令才会格式化我们的代码。。如果有人没有格式化就提交了远程仓库&#xff0…