怎么把图片路径64位编码的转化成正常的路径,不编码的

妮妮
  • 47

再给后台上传图片路径,可是获取的图片路径一直是64位编码的,后台只要正常的图片路径图片描述

图片描述

这是控制台输出的图片路径,怎么把它转化成正常的呢
这个是我的代码:图片描述

有哪位大神知道的可否告知一下,谢谢

回复
阅读 6.3k
7 个回答
水不凉
  • 4.8k

这不是64位编码的路径,这叫base64编码的Data URI

这里有两个概念,一个是 Data URI,这种 uri 本身就包含资源的数据而不是表示某个资源的地址或路径,所以说,你拿到一个 Data URI 就表示你已经拿到这个资源的数据了。

Data URI的格式是:data:mimeType;encodeType,content 其中编码方式可以省略。

第二个概念是 base64 编码,如果 Data URI 包含的是二进制内容,为了方便展示,Data URI 支持使用 base64 对资源内容进行编码。

所以,你得到图片的 base64 编码的 Data URI,为什么需要转化为图片的真实的路径呢? Data URI 没法转化为资源路径,也不需要转化为资源的真实路径。

后端需要做的是将base64的图片数据保存为图片,并返回图片位置就好.

可以参考一下PHP:

<?php
header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase64'];
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = "upload/active/img/".date('Ymd',time())."/";
if(!file_exists($new_file))
{
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($new_file, 0700);
}
$new_file = $new_file.time().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
echo '新文件保存成功:', $new_file;
}else{
echo '新文件保存失败';
}
}
?>

base64编码Data URI和资源路径不是一个东西吧

这个编码就是一张图,上面有个回答解释的很清楚了,他很占大小,一般用在请求的次数很多的地方,减少请求的往返次数从而优化网站性能。
你可以尝试找东西把它转成图片,糙一点截图啥的,再引用路径

风兮清扬
  • 5.2k

在你的图里的红框那, 需要把那个base64编辑的图片先上传到服务器, 让服务器保存, 给你返回保存的url, 然后你把这个url再上传到服务器就好了.

或者直接上传base64图片, 服务器在保存的时候, 先把base64保存成图片文件, 然后替换掉headImage的值.

把这个base64的图片先上传到你们的服务器上,服务器返会远端地址,在把这个地址传给后端

司马缸砸光
  • 54

再给后台上传图片路径,可是获取的图片路径一直是64位编码的,后台只要正常的图片路径

首先,这不是 base64编码的路径,这就是base64编码之后的图片实体,准确的说是 base64编码的DATA URI你通过H5的 File API拿到这一大坨DATA URI是没问题的;

然后,"后台只要正常的图片路径" 这是扯犊子,前端上传个本地的 URL 路径(比如c://assets/pic1.jpg)给后台是没有意义的,后台需要的是你上面的那一大坨base64 URI,他需要自己decode


const fs = require('fs');
const path = require('path');

const baseStr = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKUAAAA6CAIAAABeeQ4bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUNBNDgwNEFEQjhFMTFFNDk2QTJGNjFEQjczMjVGRjYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUNBNDgwNDlEQjhFMTFFNDk2QTJGNjFEQjczMjVGRjYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURGQTdDMzVEQjhEMTFFNDk2QTJGNjFEQjczMjVGRjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QURGQTdDMzZEQjhEMTFFNDk2QTJGNjFEQjczMjVGRjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4chVw4AAAVNklEQVR42uxdCVgT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";

function fileSaver(base64Str, filename = 'your_file_name', outputPath) {
    return new Promise((resolve, reject) => {
        const data = base64Str.split(',')[1];
        const buff = new Buffer(data, 'base64');
        const type = base64Str.match(/(?:image\/)(\w+)(?=;)/)[1];
        const savePath = path.resolve(outputPath, `${filename}.${type}`);

        fs.writeFile(savePath, buff, (err) => {
            if (err) {
                return reject(err);
            }
            return resolve(savePath);
        })
    })
}

fileSaver(baseStr, '2', './').then(
    (filepath) => console.log('File saved successfully,当前远程地址是:%s', filepath ),
    (err) => console.log('File saved failed, resean : ' + err)
);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏