file blob base64转换

base64转为file

//第一个参数是base64数据,第二个参数是生成的文件名字
function base64toFile(dataurl, filename) {
    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);
    }
    return new File([u8arr], filename, {type:mime});
}
//使用
formData.append('file',base64toFile('base64url','afile'))

file转为base64

//要把file类型的表单传进去
function fileToBase64(a) {
    var txt = a.files[0];
        formData = new FormData()
    formData.append('img[]', txt);
    var src = window.URL.createObjectURL(txt);
    return str
}
//使用
let img = document.getElementsByTagName('img')[0]//获取要被显示的图片节点
	input = document.getElementsByTagName('input')[0]//获取file类型的input
input.onchange = function(){
	img.setAttribute('src',fileToBase64(input))
}
//多个文件
//function fileToBase64(a) {
// 	for(let i = 0;i < a.files.length;i++){
//         var txt = a.files[i];
//             formData = new FormData()
//         formData.append('img[]', txt);
//         var src = window.URL.createObjectURL(txt);
//         imgStr += `
//         <img src="${src}" />
//         ` 
//     }
//     $('.imgBox')[0].innerHTML = imgStr//$('.imgBox')[0]是img的父节点
// }
// var	input = document.getElementsByTagName('input')[0]//获取file类型的input
// input.onchange = function(){
// 	fileToBase64(input)
// }

blob添加到formData

//使用cropper生成的是blob类型的数据
cropper.getCroppedCanvas().toBlob(b => {
	  console.log(b)//blob
	  var formData = new FormData()
	  // formData.append('multipartFile',b);  如果不做处理
	  formData.append('multipartFile',b,'temp.jpg');//封装好的formData可以传给接口
  })

blob转base64

function blobToBase64(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}
//使用
blobToBase64(b,function(e){
   $('.imgimg')[0].setAttribute('src',e)
})

记在这好找,以后还会用到的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值