JS - 如何上传 Base64 编码的图片

Yaiba123

已于 2023-07-19 23:26:28 修改

阅读量3.7k

点赞数

分类专栏：前端大杂烩文章标签：前端

于 2021-11-03 15:18:24 首次发布

本文链接：https://blog.csdn.net/Cai181191/article/details/121120389

版权

前端大杂烩专栏收录该内容

69 篇文章 9 订阅

订阅专栏

偶尔遇到服务端传图片给前端只能是字符串，且前端获取到图片之后还需要上传到服务端的需求，记录一下。

示例代码：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>