本文介绍如何在JavaScript中将base64格式图片转换为二进制Blob对象，并封装进FormData，最终通过AJAX提交至服务器。该方法无需修改服务端代码，即可实现标准文件上传接口对接。
背景与需求
此前在网页中调用webcam插件拍摄照片时，获取到的图片数据为base64格式。这种格式在页面img标签的src属性中直接显示没有问题，但若需上传至服务器，则会遇到格式不匹配的问题。因为服务端通常期望接收标准的文件数据，即HTML表单中type为“file”的形式。为了在不修改服务端代码的前提下沿用现有接口，需要尝试将base64数据转换为标准的FormData对象，并通过AJAX进行提交。
转换base64为Blob
第一步，将base64转换成二进制图片（Blob）
主要思路是处理base64字符串的前缀部分，进行预处理后将其转换为Blob对象。生成Blob对象后，稍作处理即可放入FormData中。
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}构建FormData
第二步，构建formData
此步骤需要借助HTML5的canvas元素。
var blob = dataURItoBlob(imageBase64); // 上一步中的函数
var canvas = document.createElement('canvas');
var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var fd = new FormData(document.forms[0]);
fd.append("the_file", blob, 'image.png');代码中的the_file对应文件的key，相当于input标签中的name属性。image.png为指定的文件名，由于base64图片信息本身不包含文件名，因此需要手动指定，该参数为可选。
AJAX提交数据
第三步，使用AJAX提交
为简化操作，此处使用jQuery的Ajax方法进行演示。在已构建好名为fd的FormData对象后，直接提交即可。
$.ajax({
url: 'http://www.example.com/upload',
method: 'POST',
processData: false, // 必须
contentType: false, // 必须
dataType: 'json',
data: fd,
success(data) {
console.log(data);
}
});以上所述是小编给大家介绍的JavaScript将base64图片转换成formData并通过AJAX提交的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！