您当前的位置:首页 > 互联网教程

JS图片转Base64

发布时间:2025-05-23 08:12:13    发布人:远客网络

JS图片转Base64

一、JS图片转Base64

1、实现JS图片转Base64功能,首先定义一个函数myUpload。

2、在myUpload函数中,获取id为upfile的元素。

3、检查是否支持文件读取,若支持则读取第一个文件。

4、判断文件大小,若大于10MB,提示上传失败。

5、若文件大小合理,执行图片转Base64操作。

6、创建FileReader对象reader,读取文件并转为DataURL格式。

7、验证文件类型是否为图片格式,若不是提示错误并返回。

8、使用reader.onload事件,执行Base64编码后的图片数据处理。

9、将处理后的图片数据发送Ajax请求至服务器端,将Base64编码后的图片数据作为参数传递。

10、服务器端处理请求,返回图片数据处理后的结果。

11、在客户端,设置文本域值为服务器端返回的结果,使用nEditor进行图片插入。

12、完成JS图片转Base64并上传至服务器的过程。

二、Js中将base64转换为file对象

1、在JavaScript中,转换Base64编码为File对象有多种方法,以下是两种常用的方式:

2、方法一:直接操作Base64字符串。首先,解析Base64字符串以获取其对应的文件类型,然后利用atob函数将Base64编码解码为原始二进制数据。接着,通过new File()构造函数,传入二进制数据和文件名,即可创建File对象。

3、let base64Str="your_base64_string";

4、let binaryData= window.atob(base64Str);

5、let file= new File([binaryData],'file_name',{type});

6、方法二:借助FormData对象。这种方式需要将Base64字符串先转换为Blob对象,再通过FormData的get方法获取File对象。Blob对象代表不可变的二进制数据,而FormData则常用于表单数据的处理。

7、let base64Str="your_base64_string";

8、let blob= dataURLToBlob(`data:${type};base64,${base64Str}`);

9、formData.append('file', blob);

10、let file= formData.get('file');

11、以上两种方法,根据实际需求和场景选择合适的方法,就能将Base64编码转换为File对象,以便于文件上传或处理其他与文件相关的操作。

三、你不知道的网站图片存储格式-base64

1、最近在前端模仿163网易登录界面的时候惊奇的发现:

2、大家先自己想想,这个图片应该怎么设置,很多人就是img就搞定了,后者一个a标签,或者background等等,但是我打开开发者工具后我发现是这样的:

3、我也没太在意,不就是一张网图吗,放到网站服务器上,然后get下来不就好了。但是事情好像不是那么简单。我给大家看看那个资源:

4、 data:image/png;base64,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

5、是这么一大堆东西,这,我真的不懂。不懂不怕呀,我可以百度,我在百度上看到的是这样婶的:

6、不懂,还是不懂,我又去看了阮一峰老师的 Base64笔记

7、这下才明白,是为了节省服务器资源,一次请求服务器就需要一个GET/POST请求,我放在本地不香吗,又不费我的服务器。传输效率又快,还能加密(虽然不怎么管用)。

8、所以一定要有一种探索的精神,对新鲜的事物有好奇。