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

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

han32685年前 (2021-05-18)javascript6028

直接上代码,要点就是把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;


标签: js

相关文章

JS/VUE按钮点击上传文件

直接上代码    importFile() {       const fil...

axios下载文件

      api         .getAllAlar...

element UI的表格fixed悬浮固定列错乱的官方解决办法

一般从无数据到有数据, 表格中的fixed列就会出现排版 以及各种奇奇怪怪的情况, 官方的办法是用表格的doLayout方法doLayout对 Table 进行重新布局。当 Table 或其祖先元素由...

elementUI—el-form表单,校验二层对象的值

表单数据:formData:{     name:'',     role:{  &nb...

js数组取交集、并集、差集、补集

js数组取交集、并集、差集、补集

一、简单数组let arrA = [1,2,3,4] let arrB = [4,5,6,7] // 取交集 let&nbs...