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

简介: 本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。

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

示例代码: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>
目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
159 2
JS上传文件(base64字符串和二进制文件流)
|
2月前
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
88 1
|
15天前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
2月前
|
JavaScript
js之图片上传
js之图片上传
72 0
|
3月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
3月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
52 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
43 1
|
3月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
35 0

热门文章

最新文章