首页 > 编程知识 正文

js上传文件转base64,js图片转base64原理

时间:2023-05-06 04:38:33 阅读:13816 作者:3034

在处理APP应用程序场景时,通常需要在上载到服务器之前处理图像文件。 例如压缩、旋转、拼接、裁剪、预览生成、canvas等。 操作后的图像通常是base64编码的字符串,将该字符串嵌入img标签的src属性中可以看到图像。

通常也可以将此字符串传递给服务器进行存储,但图像在生成base64字符串后特别长,这样访问速度非常慢。

所以,必须将其放回文件对象并传递给服务器。 这样,就可以得到图像的链接。

文件界面提供有关文件的信息,并允许网页中的JavaScript访问其内容。 通常,通过上载input type='file'/图像获得的file对象如下所示:

Data URLs (前缀为data:协议的URL )允许内容作者在文档中嵌入小文件。 用base64编码后如下所示。

Blob对象表示不变且原始数据的类文件对象。 Blob表示不一定是JavaScript本机格式的数据。 File界面基于Blob,并扩展为继承Blob功能和支持用户系统上的文件。 转换成blob发送到服务器就可以了。 图像信息都是mldcg呢

转换方法有很多百度搜索,所以这里先贴一个

base64旋转blob

functiondataurltoblob (数据URL ) { var arr=dataurl.split、mime=arr(0).match )/: ).*? ); [1],bstr=atob[1],n=bstr.length,u8arr=new Uint8Array(n; while(n-- ) u8ARR[n]=bstr.charcodeat ) n; }返回新blob ([ u8arr ],{ type: mime } ); }从} blob到base64

功能蓝牙数据(blob,callback ) { let a=new FileReader; a.onload=function(e ) callback ) e.target.result; }a.readasdataurl(blob ); }更新} 2021-08-11问题说明:可以在上传图像之前通过压缩(将图像传输到base64,然后传输到文件) ios10/11成功上传到Alibaba云(AlibabaCloud ) OSS

问题原因:兼容性问题

问题解决:从base64到File

使用兼容的newfile([u8ARR]、filename、{ type: mime } ) base64文件functiondataurltofile (数据URL、filename ) ) letarr=[1],bstr=atob[1],n=bstr.length,u8arr=new Uint8Array(n; while(n-- ) u8ARR[n]=bstr.charcodeat ) n; }返回新文件([ u8arr ],filename,{ type: mime } ); //let file=调用dataurltofile (base64 data,imgName ); 无兼容性问题将newblob([u8ARR],{ type: mime } ) base64添加到blobfunctiondataurltoblob (数据URL ) { let arr=数据URL.split } [1],bstr=atob[1],n=bstr.length,u8arr=new Uint8Array(n; while(n-- ) u8ARR[n]=bstr.charcodeat ) n; }返回新blob ([ u8arr ],{ type: mime } ); 将blob转换为filefunctionblobtofile(theblob,fileName ) ) the blob.last modified date=new date ); theBlob.name=fileName; 返回蓝牙; letfile=blobtofile(blob,imgName ),调用let blob=dataurltoblob (base64 data );

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。