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

这篇具有很好参考价值的文章主要介绍了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({// 【重点来啦】人家自提供的转码API
	filePath:image.path,// 所需转码图像路径
	encoding:"base64",// 转码类型
	success:(res)=>{
	    // 生成base64
	    let 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对象ArrayBuffer
      reader.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对象ArrayBuffer
      reader.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-0cba8c508099
    mime: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对象ArrayBuffer
            reader.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)
        }
    })
}
// #endif

function 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({// 【重点来啦】人家自提供的转码API
            filePath: 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-PLUS
    else if (plus.io) {
        return H5PlusReadFile(filePath,mimeType);
    }
        // #endif
    // #ifdef H5
    else if (XMLHttpRequest) {
        return H5ReadBlobUrl(filePath,mimeType);
    }
    // #endif
    else {
        throw new Error('不支持的平台');
    }
};

实际运行效果

H5平台

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

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

ps:文件的md5,不同的文件是一定不同的,如果你获得的md5是一样的—那么就好好检查一下,spark获取md5的时候是不是都是同一个东西了。文章来源地址https://www.toymoban.com/news/detail-829409.html

其他场景有条件再测试。

到了这里,关于uniapp不同平台获取文件内容以及base64编码特征的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 将base64字符串保存为图片、Word、Excel、音频、视频等文件

     uniapp 将base64字符串保存为图片、Word、Excel、音频、视频等文件 index.vue,复制运行此代码看效果,支持Android、iOS 参考文档: 1、uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes 2、录音文件与Base64编码相互转换的方法 3、关于base64保存为文件 4、

    2024年02月11日
    浏览(58)
  • vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

    1、自定义布局       查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图 :                                                    目标效果 :                            在实现

    2024年01月18日
    浏览(45)
  • 【base64】JavaScript&uniapp 将图片转为base64并展示

    Base64是一种用于编码二进制数据的方法,它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中,通过将二进制数据转换为可打印字符的形式进行传输  图片大小从1.36MB到169kb 上面的代码中,toDataURL产生的是图片的base64编码,Base64编码必须是完整且正确

    2024年02月11日
    浏览(47)
  • uniapp+vue3+vant-weapp运行到微信小程序中绘制海报,将画布中绘制base64格式的图片以及长按进行图片的分享和下载

    对于uniapp绘制海报,遇到的难点就是将bas64格式的图片绘制上去,试了很多方式,终于找到了不错的方法, 先将其下载到本地,再进行绘制,以下就是 完整的代码 海报的内容可以根据自己的需求自行更改 ## 下面有一个测试base64格式的图片,可用替换成自己的实际路径 ## 长按

    2024年02月21日
    浏览(142)
  • 前端uniapp如何转base64使用uniapp插件市场

    网址 可以下载,也可以引用,我是下载下来的引用 解决方法 参考大佬 参考大佬 感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

    2024年02月07日
    浏览(47)
  • uniapp 微信小程序base64流转图片

    因为这次后端返回的图片并不是一个http地址,百度找了很久,在此记录 1,新建一个js文件 2.在vue文件中引入 import { base64ToPath} from \\\'./base64src.js\\\' let result = 后端返回的base64流.replace(/[rn]/g, \\\"\\\"); let pdfBase64 = `data:application/pdf;base64,${result}`;

    2024年02月16日
    浏览(63)
  • uniapp-微信小程序-图片转base64

    当前在做得小程序设计拍照识别,而服务器方需要前端提供图片的base64编码作为参数进行解析识别,一开始想着走原生JS的base64方法——借助canvas,当然我也试了,就在自己觉得没问题的时候,调试时终端报错了:ReferenceError: Image is not defined. 我着实懵了,也就是说Image对象实

    2024年02月13日
    浏览(48)
  • uniapp 存储base64资源为http链接图片

    1. 新建一个base64.js 文件 2. 引入使用

    2024年02月10日
    浏览(30)
  • 前端获取本地图片并且转化为base64格式

    今天看见网上各位大佬五花八门的前端图片获取并转化为base64格式的操作,果然高手在民间,很神奇,没想到有这么多方法,那我也来写一个我自己的方法 我是习惯使用filereader这个内置类,感觉比较简单,不用管内部原理,反正可以获取图片,实现在互联网上的传输就可以

    2024年02月09日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包