JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

之前为了拍摄照片使用了webcam相关的插件，其拍摄后得到的是base64格式的图片，直接显示没问题，在src中直接指定就可以了，但是要上传到server时问题就来了，server端接收的是标准的文件，也就是html form中type=”file”的形式。想要沿用这个接口不更改server端代码，于是尝试将base64直接转换成标准的fomeData并通过AJAX提交。 第一步，将base64转换成二进制图片（Blob） 主要思路是整理一下base64的前面几个字符，预处理以后转换成Blob对象，这个之后稍作处理可以放在formData中。 function dataURItoBlob(b 在Web开发中，有时我们需要处理用户通过摄像头拍摄的照片或在线选择的图片。这些图片通常以Base64编码的形式存在，适合在HTML中直接显示。然而，当需要将这些图片上传到服务器时，服务器通常期望接收标准的文件形式，即通过`<form>`元素的`<input type="file">`字段提交的文件。为了解决这个问题，我们可以将Base64编码的图片转换为Blob对象，并将其放入FormData对象中，然后通过AJAX提交。以下是如何实现这一过程的详细步骤： ### 第一步：Base64转Blob Base64编码的图片数据中包含了图片的元信息（如MIME类型）以及实际的二进制数据。我们需要将Base64字符串解析成原始的二进制数据，然后创建一个Blob对象。这个过程可以通过以下JavaScript函数完成： ```javascript 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 }); } ``` 此函数接受一个Base64编码的字符串作为参数，解码并返回一个Blob对象。 ### 第二步：构建FormData Blob对象准备好后，我们需要将其放入FormData对象中，以便通过AJAX发送。这可以通过创建一个新的FormData实例，然后使用`append()`方法添加键值对来实现： ```javascript var blob = dataURItoBlob(imageBase64); // 假设imageBase64是Base64编码的图片 var canvas = document.createElement('canvas'); // 可以使用canvas处理图片，如调整大小、质量等 var dataURL = canvas.toDataURL('image/jpeg', 0.5); var fd = new FormData(); fd.append("the_file", blob, 'image.png'); // "the_file"是文件键，"image.png"是可选的文件名 ``` ### 第三步：使用AJAX提交FormData 我们使用jQuery的`$.ajax()`函数或者原生的`XMLHttpRequest`对象来发送FormData。确保设置`processData`和`contentType`为`false`，以保持FormData的原始格式： ```javascript $.ajax({ url: 'http://www.example.com/upload', method: 'POST', processData: false, // 必须 contentType: false, // 必须 dataType: 'json', data: fd, success: function(data) { console.log(data); } }); ``` 在上述代码中，我们向服务器的`/upload`路径发送了一个POST请求，服务器应能正确处理这种类型的请求，接收并存储文件。 总结，通过将Base64编码的图片转换为Blob，再放入FormData对象，然后利用AJAX提交，我们可以按照服务器期望的方式上传图片，而无需改变服务器端的代码。这种方法对于处理来自Webcam或其他在线来源的图片非常实用，同时保持了前端和后端之间的接口一致性。