河源网站seo,商务网站建设步骤,mv网站建设,WordPress页面构建器前言
文件图片上传#xff0c;客户端预览是很正常的需求#xff0c;获取文件的md5特征码也是很正常的#xff0c;那么#xff0c;在uniapp中三种环境#xff0c;h5, 小程序以及 app环境下#xff0c;如何实现的#xff1f; 参考#xff1a; 如何在uniapp中读取文件Arr…前言
文件图片上传客户端预览是很正常的需求获取文件的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.photoPathres.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 imageBase64data: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 blobhttp.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) :Promiseany {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): PromiseFileReaderInfo {let intervalInst:anynull;const fileinfo:FileReaderInfo{fileHeader64:,tempPath:blobUrl,arrayBuffer:null,base64:,mime:mimeType,md5:,};return new PromiseFileReaderInfo(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:anye?.target?.result;// let spark new SparkMD5(); // 创建md5对象基于SparkMD5let spark new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5spark.end();fileinfo.arrayBufferdata;};reader64.onload function (e) {fileinfo.base64(e?.target?.result);let subPosIdx (fileinfo.base64 ).indexOf(,);let headerContent fileinfo.base64.substr(subPosIdx 1, 160);fileinfo.fileHeader64headerContent;};intervalInstsetInterval((){if(fileinfo.base64fileinfo.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) :PromiseFileReaderInfo {const fileinfo:FileReaderInfo{fileHeader64:,tempPath:filePath,arrayBuffer:null,base64:,mime:mimeType,md5:,};return new PromiseFileReaderInfo((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.fileHeader64headerContent;const result {base64: evt.target.result.split(,)[1],size: file.size,};const data:anyuni.base64ToArrayBuffer(result.base64);// let spark new SparkMD5(); // 创建md5对象基于SparkMD5let spark new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5spark.end();fileinfo.arrayBufferdata;resolve(fileinfo);}})},function (error) {reject(error)},)} catch (error) {reject(error)}})
}
// #endiffunction MpReadFile(filePath:string,mimeType:string) :PromiseFileReaderInfo{const fileinfo:FileReaderInfo{fileHeader64:,tempPath:filePath,arrayBuffer:null,base64:,mime:mimeType,md5:,};return new PromiseFileReaderInfo((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对象基于SparkMD5let spark new SparkMD5.ArrayBuffer();spark.append(data);fileinfo.md5spark.end();fileinfo.arrayBufferdata;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.fileHeader64headerContent;resolve(fileinfo);}});});
}// 对外暴露的方法通过这个方法获取文件的ArrayBuffer内部会根据平台调用不同的方法
export const readFileDataExt async (filePath:string,mimeType:string) : PromiseFileReaderInfo {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的时候是不是都是同一个东西了。
其他场景有条件再测试。
