Js中将base64转换为file对象

一、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对象，以便于文件上传或处理其他与文件相关的操作。

二、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并上传至服务器的过程。

三、支付宝小程序MQTT数据Base64错误

1、支付宝小程序在真机端接收Base64格式数据时出现错误，问题在于数据中包含换行符，导致解析失败。解决方法是去除字符串中的换行符。测试人员在支付宝小程序上未显示轨迹，通过查看toast信息发现错误为AMQJS0007E Socket error。观察错误日志后，得知问题可能与Base64格式有关。尝试使用模拟器和真机接收相同数据，发现真机端存在异常。

2、分析错误信息，发现错误源来自MQTT模块，具体为内部错误，错误信息指出数据格式错误。经过一系列排查，发现是Base64转ArrayBuffer的过程出现问题。对比模拟器与真机端数据，发现固定位置值不一致，推测可能是数据中包含特殊字符。

3、深入分析Base64字符串，尝试解码后发现存在乱码现象。进一步对比发现后台返回的Base64字符串中，“l”与“I”字符位置写错。确认后发现后台发送的Base64数据正确，问题在于支付宝小程序在Base64转ArrayBuffer的处理逻辑上存在问题。

4、尝试使用微信小程序提供的Base64转ArrayBuffer与string的方法，但支付宝小程序并未提供相应接口，只能通过其他方式实现。最终发现将Base64字符串先转换为string，再转换为ArrayBuffer可以解决问题。

5、测试发现，去除字符串中的换行符后，支付宝小程序接收Base64数据不再出现错误。经过多次测试验证，确定是数据中包含不可见字符导致问题。成功解决了问题后，测试人员对支付宝小程序的Base64处理逻辑进行了深入研究，收获颇丰。