当前位置:首页 > 经验笔记 > javascript > 正文内容

js把base64的数据转换成图片并上传

han32684年前 (2021-05-18)javascript4270

直接上代码,要点就是把base64转成Blob,添加到FormData传递给后台程序,跟选择图片文件上传时一样的了。

//base64图片数据
var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD......"; 

//上传到服务器
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
	u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
var fd = new FormData();
fd.append("upfile", obj,"image.png");
$.ajax({
    url: "/file/upfile",
    type: "POST",
    processData: false,
    contentType: false,
    data: fd,
    success: function (data) {
    	console.log(data);
    }
});

//保存图片到本地 
(function(t){
    var dlLink = t || document.createElement("a");
    if(!t){
        dlLink.id='dlLink';
        dlLink.download = '文件名'; 
        document.body.appendChild(dlLink);
    }
    dlLink.href = dataurl;
    dlLink.click();
})(document.querySelector("#dlLink"));

//显示为网页图片
<img id="testImg" src="" />
document.querySelector("#testImg").src = dataurl;


扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/56.html

分享给朋友:

相关文章

ES6 find 和 filter 的区别

遇到个功能是要分类就想说在前端过滤,不要从查数据库的时候过滤了。然后就想说除了filter还有啥好用的发现有个find,测试一番之后发现const list = [{&#...

树形结构(tree)和扁平数组(list)的相互转换

项目中很多地方需要用到树形结构表格等,因此自己封了个VUE的树和表格组件,需要经常对两种形式的数据进行相互转换,这里记录下转换的方法扁平数组转换为树形结构这个是最常用的,当我们从后台获取一个扁平数组的...

JS/VUE按钮点击excel上传文件解析文件内容

代码如示    import * as XLSX from 'xlsx'; // 导入xlsx库    ...

layer弹层遮罩挡住窗体解决,解决layer弹层遮罩挡住窗体的问题

layer弹层遮罩挡住窗体解决,解决layer弹层遮罩挡住窗体的问题

上代码<div>     <div>这里面某个按钮触发弹层<div>     &...

Echarts图表的悬浮框位置的调整

下面的代码实现了悬浮框的位置不会超出界面 最多在离界面边缘5px的地方tooltip: {         ...