uniapp不同平台获取文件内容以及base64编码特征

前言

文件图片上传,客户端预览是很正常的需求,获取文件的md5特征码也是很正常的,那么,在uniapp中三种环境,h5, 小程序以及 app环境下,如何实现的?
参考:
如何在uniapp中读取文件ArrayBuffer和sha256哈希值,支持H5、APP、小程序

uniapp 没有提供跨平台的 API 来获取文件的 sha256 哈希值和读取文件的 ArrayBuffer,因此需要开发者自己手动兼容各个平台。在小程序端使用FileSystemManager、app 端是plus.io、H5 端是FileReader,这些 API 都是平台特有的,而且实际调用存在各种问题,也缺乏相关教程

uniapp-微信小程序-图片转base64

ps:只适合小文件上传,大文件的话不要用这个。计算md5的时候采用了sparkMD5,请自行安装。

具体实现

必须要知道的是文件的临时路径,就是:
http://xxxxx 形式的

例如:

// 读取图像文件
uni.chooseImage({count: 9,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {const tempFilePaths = res.tempFilePaths// tempFilePaths 是一个数组,可以通过索引获取图片路径,比如tempFilePaths[0],我们需要的就是这个路径},
})

或者

	uni.chooseMedia({count:1,// 限制选取图像数量mediaType:["image"],// 设置选取资源为图片类型sourceType:["album","camera"],// 设置图像来源:相册或相机camera:"back",// 设置相机为后置摄像头success:(res)=>{// 获取微信拿到的图片的临时地址并保存到本地this.photoPath=res.tempFiles[0].tempFilePath;}})
},

小程序获取 ArrayBuffer以及读取base64:

arrayBuffer:
// 小程序,filePath 是一个本地文件路径
const fs = uni.getFileSystemManager()
return fs.readFileSync(filePath)
base64:
// (由于uniapp开发所以uni打头)
uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码APIfilePath:image.path,// 所需转码图像路径encoding:"base64",// 转码类型success:(res)=>{// 生成base64let imageBase64='data:image/'+image.type+';base64,'+res.data;console.log('转base64后:',imageBase64);}
})

H5获取 ArrayBuffer以及读取base64:

const blobURLToBlob = (url) => {return new Promise((resolve, reject) => {var http = new XMLHttpRequest()http.open('GET', url, true)http.responseType = 'blob'http.onload = function (e) {if (this.status == 200 || this.status === 0) {resolve(this.response)} else {reject(this.status)}}http.send()})
}//  通过blob:url读取实际的ArrayBuffer数据
const H5ReadBlobUrlArrayBuffer = (blobUrl) => {return new Promise(async (resolve, reject) => {try {const reader = new FileReader()// blob数据转file对象数据const fileBlob: any = await blobURLToBlob(blobUrl)const file = new window.File([fileBlob], 'file.name', { type: 'file.type' })// 读取file对象ArrayBufferreader.readAsArrayBuffer(file)reader.onload = function (e) {resolve(e?.target?.result)}} catch (e) {reject(e)}})
}
//  通过blob:url读取实际的base64:
const H5ReadBlobUrlBase64 = (blobUrl) => {return new Promise(async (resolve, reject) => {try {const reader = new FileReader()// blob数据转file对象数据const fileBlob: any = await blobURLToBlob(blobUrl)const file = new window.File([fileBlob], 'file.name', { type: 'file.type' })// 读取file对象ArrayBufferreader.readAsDataURL(file)reader.onload = function (e) {resolve(e?.target?.result)}} catch (e) {reject(e)}})
}注意:实际上 h5都是使用fileReader的api来读取的,arrayBuffer是:readAsArrayBuffer,而base64是readAsDataURL,不但图片,文件也能这样读取base64的。

APP获取 ArrayBuffer以及读取base64:

const H5PlusReadFileArrayBuffer = (filePath) => {return new Promise((resolve, reject) => {try {plus.io.resolveLocalFileSystemURL(filePath,function (entry) {entry?.file(function (file) {const fileReader = new plus.io.FileReader()fileReader.readAsDataURL(file, 'utf-8')fileReader.onloadend = function (evt) {const result = {base64: evt.target.result.split(',')[1],size: file.size,}resolve(uni.base64ToArrayBuffer(result.base64))}})},function (error) {reject(error)},)} catch (error) {reject(error)}})
}

app方面是直接先读取base64,再读取arrayBuffer,所以一气呵成。

综合:

import  SparkMD5 from 'spark-md5';
export interface FileReaderInfo {fileHeader64:string;//--base64形式的文件前一段内容,用于传递magicNumber进行判断。base64:string;arrayBuffer:any;tempPath:string;//形式如下:blob:http://localhost:3000/5fd140d3-1372-4394-8b08-0cba8c508099mime:string;errMsg?:string;md5:string,//--获取文件md5.
}// #ifdef H5
// 通过blob:url读取实际的blob数据
function  h5_blobURLToBlob  (url:string) :Promise<any> {return new Promise((resolve, reject) => {var http = new XMLHttpRequest();http.open('GET', url, true)http.responseType = 'blob';http.onload = function (e) {if (this.status == 200 || this.status === 0) {resolve(this.response)} else {reject(this.status)}};http.send()})
}//  通过blob:url读取实际的ArrayBuffer数据function H5ReadBlobUrl(blobUrl:string,mimeType:string): Promise<FileReaderInfo> {let intervalInst:any=null;const fileinfo:FileReaderInfo={fileHeader64:"",tempPath:blobUrl,arrayBuffer:null,base64:"",mime:mimeType,md5:"",};return new Promise<FileReaderInfo>(async (resolve, reject) => {try {const reader = new FileReader();const reader64 = new FileReader();// blob数据转file对象数据const fileBlob: any = await h5_blobURLToBlob(blobUrl);const file = new window.File([fileBlob], 'file.name', { type: mimeType });// 读取file对象ArrayBufferreader.readAsArrayBuffer(file);reader64.readAsDataURL(file);reader.onload = function (e) {const data:any=e?.target?.result;// let spark = new SparkMD5(); // 创建md5对象(基于SparkMD5)let spark = new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5=spark.end();fileinfo.arrayBuffer=data;};reader64.onload = function (e) {fileinfo.base64=(e?.target?.result+"");let subPosIdx = (fileinfo.base64 + "").indexOf(",");let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);fileinfo.fileHeader64=headerContent;};intervalInst=setInterval(()=>{if(fileinfo.base64&&fileinfo.arrayBuffer){clearInterval(intervalInst);resolve(fileinfo);}},100);} catch (e) {if(intervalInst){clearInterval(intervalInst);}reject(e)}})
}
// #endif// #ifdef APP-PLUS
// 通过plus.io读取文件的ArrayBuffer数据
function H5PlusReadFile  (filePath:string,mimeType:string) :Promise<FileReaderInfo> {const fileinfo:FileReaderInfo={fileHeader64:"",tempPath:filePath,arrayBuffer:null,base64:"",mime:mimeType,md5:"",};return new Promise<FileReaderInfo>((resolve, reject) => {try {plus.io.resolveLocalFileSystemURL(filePath,function (entry:any) {entry?.file(function (file:any) {const fileReader = new plus.io.FileReader();fileReader.readAsDataURL(file, 'utf-8');fileReader.onloadend = function (evt:any) {fileinfo.base64=(evt?.target?.result+"");let subPosIdx = (fileinfo.base64 + "").indexOf(",");let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);fileinfo.fileHeader64=headerContent;const result = {base64: evt.target.result.split(',')[1],size: file.size,};const data:any=uni.base64ToArrayBuffer(result.base64);// let spark = new SparkMD5(); // 创建md5对象(基于SparkMD5)let spark = new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5=spark.end();fileinfo.arrayBuffer=data;resolve(fileinfo);}})},function (error) {reject(error)},)} catch (error) {reject(error)}})
}
// #endiffunction MpReadFile(filePath:string,mimeType:string) :Promise<FileReaderInfo>{const fileinfo:FileReaderInfo={fileHeader64:"",tempPath:filePath,arrayBuffer:null,base64:"",mime:mimeType,md5:"",};return new Promise<FileReaderInfo>((resolve, reject) => {if (uni.canIUse('getFileSystemManager') && uni.getFileSystemManager) {}else{fileinfo.errMsg="无效环境,不可调用api!";reject(fileinfo);return ;}const fs = uni.getFileSystemManager();const data:any = fs.readFileSync(filePath);// let spark = new SparkMD5(); // 创建md5对象(基于SparkMD5)let spark = new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5=spark.end();fileinfo.arrayBuffer=data;fs.readFile({// 【重点来啦】人家自提供的转码APIfilePath: filePath,// 所需转码图像路径encoding: "base64",// 转码类型success: (res) => {// 生成base64// let imageBase64 = 'data:image/' + image.type + ';base64,' + res.data;let imageBase64 = res.data;console.log('转base64后:', imageBase64);fileinfo.base64=(imageBase64+"");let subPosIdx = (fileinfo.base64 + "").indexOf(",");let headerContent = fileinfo.base64.substr(subPosIdx + 1, 160);fileinfo.fileHeader64=headerContent;resolve(fileinfo);}});});
}// 对外暴露的方法,通过这个方法获取文件的ArrayBuffer,内部会根据平台调用不同的方法
export const readFileDataExt = async (filePath:string,mimeType:string) : Promise<FileReaderInfo> => {if (uni.canIUse('getFileSystemManager') && uni.getFileSystemManager) {return MpReadFile(filePath,mimeType);}// #ifdef APP-PLUSelse if (plus.io) {return H5PlusReadFile(filePath,mimeType);}// #endif// #ifdef H5else if (XMLHttpRequest) {return H5ReadBlobUrl(filePath,mimeType);}// #endifelse {throw new Error('不支持的平台');}
};

实际运行效果

H5平台

选择图片进行上传:图片的数据如下:

在这里插入图片描述
在这里插入图片描述

ps:文件的md5,不同的文件是一定不同的,如果你获得的md5是一样的—那么就好好检查一下,spark获取md5的时候是不是都是同一个东西了。

其他场景有条件再测试。

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

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

相关文章

Https证书续签-acme.sh-腾讯云之DnsPod

ename 域名切换到 DnsPod 上面解析 可以先看下之前的 acme.sh 介绍文章然后再来次补充更多。 之前说过了 acme.sh 在阿里云下的使用。 这里做个后续补充 之前的域名是在 ename 上的 &#xff0c;为了自动续签切换到 DnsPod 上面解析 注意事项 可以把原来 ename 上的解析先导出…

多端开发围炉夜话

文章目录 一、多端开发 一、多端开发 uni-app 官网 UNI-APP中的UI框架&#xff1a;介绍常用的UI框架及其特点 uView UIVant WeappColor UIMint UI

python 与 neo4j 交互(py2neo 使用)

参考自&#xff1a;neo4j的python.py2neo操作入门 官方文档&#xff1a;The Py2neo Handbook — py2neo 2021.1 安装&#xff1a;pip install py2neo -i https://pypi.tuna.tsinghua.edu.cn/simple 1 节点 / 关系 / 属性 / 路径 节点(Node)和关系(relationship)是构成图的基础…

Android 7.0以上charles无法抓取部分https包问题

首先保证配置一切正确 手机通过访问chls.pro/ssl下载.pem证书&#xff0c;如无法安装&#xff0c;在文件管理器中将后缀名改为.crt 在设置中安装该证书 Charles-Proxy - SSL Proxying Setting - Include 添加需要抓包的URL:443即可 以上基本配置结束后&#xff0c;看下代码 代…

Java+SpringBoot:滑雪场管理的技术革新

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Linux挂载磁盘和磁盘分区及设置开机自动挂载_亲测成功

Linux挂载磁盘和磁盘分区及设置开机自动挂载_亲测成功 Linux下磁盘分区命令主要由两个&#xff1a; fdisk &#xff1a;最大支持不超过2T,MBR分区&#xff1b;parted &#xff1a;支持GPT&#xff0c;适用于大容量分区&#xff1b; 如果挂载磁盘超过2T,请使用GPT分区,不然会…

探索水下低光照图像检测性能,基于DETR(DEtection TRansformer)模型开发构建海底生物检测识别分析系统

海底这类特殊数据场景下的检测模型开发相对来说比较少&#xff0c;在前面的博文中也有一些涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《尝试探索水下目标检测&#xff0c;基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统》 《基于YOLOv5C3CBAMCBA…

搜维尔科技:OptiTrack探索人类与技术之间关系的开创性表演

另一种蓝色通过 OptiTrack 释放创造力 总部位于荷兰的当代舞蹈团因其探索人类与技术之间关系的开创性表演而受到广泛赞誉。该公司由富有远见的编舞家大卫米登多普创立&#xff0c;不仅利用技术作为探索的主题&#xff0c;而且将其作为表达故事的动态工具。 “我一直对文化与…

超平面介绍

超平面公式 (1) 超平面是指n维线性空间中维度为n-1的子空间。它可以把线性空间分割成不相交的两部分。比如二维空间中&#xff0c;一条直线是一维的&#xff0c;它把平面分成了两部分&#xff1b;三维空间中&#xff0c;一个平面是二维的&#xff0c;它把空间分成了两部分。(2…

五种多目标优化算法(MOAHA、MOGWO、NSWOA、MOPSO、NSGA2)性能对比,包含6种评价指标,9个测试函数(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOAHA 1.2MOGWO 1.3NSWOA 1.4MOPSO 1.5NSGA2 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数&#xff08;zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3&#xff09;&#xff…

iOS整理 - 关于直播 - 搭建服务端

前言 其实本人一直都想自己简单做一套直播&#xff08;包括移动端和服务端&#xff09;的开发测试&#xff0c;但是之前一直做得比较迷茫。最近偶然间在来了灵感&#xff0c;瞬间解除了我很多疑惑。我会分享出来&#xff0c;希望大家一起研究下。稍后&#xff0c;我完整做好了…

python在flask中的请求数据“无限流”

文章目录 一、问题描述二、解决方案 一、问题描述 在flask请求中&#xff0c;有个需求是让调用方一直调接口&#xff0c;并立马返回&#xff0c;而接口方缓存请求&#xff0c;依次执行。 二、解决方案 from flask import Flask, request, jsonify from queue import Queue i…

使用C# Net6连接国产达梦数据库记录

达梦官网&#xff1a;http://www.dameng.com/ 1 下载达梦并进行安装 下载地址&#xff1a;官网首页——服务与合作——下载中心&#xff08;https://www.dameng.com/list_103.html&#xff09; 根据需要自行下载需要的版本&#xff0c;测试版本为&#xff1a;x86 win64 DM8版…

【C#】List泛型数据集如何循环移动,最后一位移动到第一位,以此类推

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…

【Vue3】使用ref与reactive创建响应式对象

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

Java面试题:volatile专题

王有志,一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群:共同富裕的Java人 今天是《面霸的自我修养》第4篇文章,我们一起来看看面试中会问到哪些关于volatile的问题吧。数据来源: 大部分来自于各机构(Java之父,Java继父,某灵,某泡,某客)以及各博主整理文档…

攻防世界-web-Training-WWW-Robots

题目信息 In this little training challenge, you are going to learn about the Robots_exclusion_standard. The robots.txt file is used by web crawlers to check if they are allowed to crawl and index your website or only parts of it. Sometimes these files rev…

[word] 如何将word文本转换成表格? #知识分享#学习方法#媒体

如何将word文本转换成表格&#xff1f; 如何将word文本转换成表格&#xff1f;不管是Word入门新手还是老手&#xff0c;相信这个技巧会让你更加熟练Word&#xff0c;操作起来得心应手&#xff01; 1.文本转换成表格 同样的要怎么把一堆凌乱的数据转换成表格呢&#xff1f;这里…

排序算法——归并排序

基本思想 归并排序是建立在归并操作上的一种非常有效的排序算法。该算法是采用分治法的一个非常典型的应用。将已有的子序列合并&#xff0c;得到完全有序的序列。即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个有序表&#xff0c;称为二路并…

凸包表面积、体积、包围框的坐标、对角线

凸包表面积、体积、包围框的坐标、对角线 一、算法原理1.计算表面积.2.计算体积3.返回包围框最大值坐标4.返回包围框最小值坐标5.包围盒的对角线长度 二、代码三、结果展示1.函数信息展示2.点云数据3.凸包后数据 四、相关链接 一、算法原理 1.计算表面积. area hull.get_sur…