Base64转化为图片并上传服务器

柔光的暖阳◎ 2023-10-05 21:45 54阅读 0赞

## 前言 ##

在做身份证读卡器自动录入功能时，发现返回的图片信息是base64字符串。  
但需要将图片存储到服务器上，所以就要将base64字符串转化为图片上传。

## 一、操作步骤 ##

### 1.转化为Blob ###

将base64转化为二进制文件

代码如下：

// 将base64转换为blob
    function dataURLtoFile(dataURI, type) {
        
        let binary = atob(dataURI.split(',')[1]);
        let array = [];
        for (let i = 0; i < binary.length; i++) {
        
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {
        type: type});
    }

### 2.上传文件服务器 ###

得到图片文件，剩下就和普通的图片上传流程一样

代码如下：

function upload(baseStr, index) {
        
    	// 图片地址
        let imgBase = 'data:image/jpeg;base64,' + baseStr;
        let blob = dataURLtoFile(imgBase, 'image/jpeg');
        var formData = new FormData();
        let fileOfBlob = new File([blob], new Date() + '.jpg'); // 重命名了
        formData.append("faceInfo", fileOfBlob);
        $.ajax({
        
            url: baseImgUrl + "xx/xx/uploadImage", //用于文件上传的服务器端请求地址
            dataType: 'json',
            type: 'POST',
            async: false,
            data: formData,
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (r) {
         //服务器成功响应处理函数
                if (r.state) {
        
                	// 上传成功后的处理
                    var data = r.result;
    				// 图片地址
                    var url = baseImgUrl + data[0]
                    // ...
                } else {
        
                    message("错误", "上传失败");
                }
            }
        });
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python把图片转化为base64格式

Python把图片转化为base64格式： import base64 f = open("../../timg.jpg",'rb') 二进制方式打开图文

妖狐艹你老母/ 2024年04月01日 09:15/ 0 赞/ 79 阅读

相关 JS图片多个上传，并压缩为Base64

首先是JS 批量上传 HTML <div id="Pic_pass"> <p style="font-size: 20px;fo

淡淡的烟草味﹌/ 2023年10月11日 13:12/ 0 赞/ 50 阅读

相关 Base64转化为图片并上传服务器

前言在做身份证读卡器自动录入功能时，发现返回的图片信息是base64字符串。但需要将图片存储到服务器上，所以就要将base64字符串转化为图片上传。一、操作

柔光的暖阳◎/ 2023年10月05日 21:45/ 0 赞/ 55 阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 172 阅读

相关 elementui 上传图片转base64

elementui 上传图片转base64 做项目的时候，遇到需要上传图片的需求，虽然已经做好了，但是想想PC端有时候也会遇到（这次是移动端的），所以就想到了用eleme

ゞ浴缸里的玫瑰/ 2023年02月23日 05:05/ 0 赞/ 23 阅读

相关微信小程序上传图片转化为base64格式

上传图片函数 clickimage: function(e) { var index = e.currentTarget.dataset.index

你的名字/ 2023年01月10日 03:40/ 0 赞/ 196 阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 395 阅读

相关上传图片格式为base64

后端设置base64格式的图片前提：下载node.js 安装导入js脚本 ![在这里插入图片描述][20190624172552951.png]

短命女/ 2022年01月06日 07:19/ 0 赞/ 420 阅读

相关 uniapp--上传图片转base64

最近后端接口更新，需要使用图片Base64+图片类型（png/jpg等）上传; 试了好多兼容小程序的方法; 小程序参考[uni-app上传图片转base64\_网络\_

以你之姓@/ 2021年09月13日 16:02/ 0 赞/ 1355 阅读

相关 POST接口上传图片base64接口中“+”转化为空格问题解决

POST接口上传图片base64接口中“+”转化为空格问题解决问题在使用element UI上传图片的时候，发现转化为base64的图片字符中含有 +

浅浅的花香味﹌/ 2021年08月02日 21:13/ 0 赞/ 496 阅读