偶尔遇到服务端传图片给前端只能是字符串，且前端获取到图片之后还需要上传到服务端的需求，记录一下。
示例代码：index.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>JS 如何上传 Base64 编码的图片</h1>
</body>
<script type="text/javascript">
// Base64 编码的图片字符串
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAA...';
// 验证 Base64 编码的图片是否可显示
const base64Img = document.createElement('img');
base64Img.src = base64String;
document.body.appendChild(base64Img);
// Base64 编码的图片转成二进制图片
const byteString = window.atob(base64String.split(',')[1]);
const mimeString = base64String.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], {
type: mimeString });
// 验证二进制图片是否可显示
const url = URL.createObjectURL(blob);
const blobImg = document.createElement('img');
blobImg.src = url
document.body.appendChild(blobImg);
// 上传图片
const formData = new FormData()
formData.append('file', blob, 'image.png')
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
console.log('上传成功', response);
})
.catch(error => {
console.error('上传失败', error);
});
</script>
</html>
