【JS】js怎么将 base64转换成图片?

js怎么将 base64转换成图片?
原因是后台不支持上传 base64的图片,只能在前端解决转换问题。
【JS】js怎么将 base64转换成图片?

解决问题:

  //获取数组最后一个元素

let hasFiles = files[Object.keys(files).pop()] // 参考上面的图片

let file = hasFiles.url

let name = hasFiles.file.name

let type = hasFiles.file.type

function base64ToBlob(urlData, type) {

let arr = urlData.split(',');

let mime = arr[0].match(/:(.*?);/)[1] || type;

// 去掉url的头,并转化为byte

let bytes = window.atob(arr[1]);

// 处理异常,将ascii码小于0的转换为大于0

let ab = new ArrayBuffer(bytes.length);

// 生成视图(直接针对内存):8位无符号整数,长度1个字节

let ia = new Uint8Array(ab);

for (let i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob([ab], {

type: mime

});

}

if (hasFiles.file.size > 1024 * 1024 * 10) {

throw '文件超过10M'

}

let conversions = base64ToBlob(file, type)

let param = new FormData()

// 没给好一个值 param.append('file', file, name) 改为param.append('file', conversions, name)

param.append('file', conversions, name)

param.append('chunk', '0')

axios.post(config.api.upload, param).then(function (res) {

if (res.status === 200) {

//后端判断文件大小

if (res.data && res.data.state === 'ERROR') {

throw res.data && res.data.msg;

}

console.log(res)

}

});

回答

需求描述的挺模糊的,因为base64本身就可以作为图片src显示的。。。
是不是这样一个需求: 需要前端将base64转换为可以上传的file对象,然后放在ajax的表单中上传?
如果这样的话,看代码。

    function base64ToBlob(urlData) {

var arr = urlData.split(',');

var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';

// 去掉url的头,并转化为byte

var bytes = window.atob(arr[1]);

// 处理异常,将ascii码小于0的转换为大于0

var ab = new ArrayBuffer(bytes.length);

// 生成视图(直接针对内存):8位无符号整数,长度1个字节

var ia = new Uint8Array(ab);

for (var i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob([ab], {

type: mime

});

}

// 使用方式

upload({

url: 'xxx',

files: [{

name: 'name1',

// 值可以用base64转好的blob,也可以直接用fileinput中获取的文件对象,效果一样

file: b64ToBlob(imgData),

}],

...

});

注意,上述upload可以是你自己的上传方法(库很多,譬如webupload,当然自己封装一个也很简单),原理如下:

var formdata = new FormData();

var files = settings.files;

if (files) {

if (Array.isArray(files)) {

for (var i = 0,

len = files.length; i < len; i++) {

formdata.append(files[i].name, files[i].file);

}

} else {

formdata.append(files.name, files.file);

}

}

...

省略了若干代码。

总而言之,第一段代码就可以符合这个需求了(个人理解下来的需求)。

去掉data:image/png;base64,,然后base64解码

var image_64 = 'data:image/png;base64,xxxxxxxxxxxxxxxxx';

var image = atob(image_64.replace('data:image/png;base64,',''));

你需要上传给后端的应该是个bolb对象吧,看样子就是你截图里的那个file对象了,直接把这个对象上传就行了

直接上传那个file文件给后台,后台他会处理的,我们就是这样做的

后台没事找事,base64 的字符串转代码后台就是几行代码的事,故意不给转吧

微信小程序到这一步走不通了

  return new Blob([ab], {

type: mime

});

以上是 【JS】js怎么将 base64转换成图片? 的全部内容, 来源链接: utcz.com/a/83179.html

回到顶部