js中实现 base64 与文件格式互转

这篇具有很好参考价值的文章主要介绍了js中实现 base64 与文件格式互转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文件转 base64

通过 reader.readAsDataURL 方法实现

function file2base64(fileObj){
    let fileAddress = fileObj; //获取文件, fileObj 为文件对象
    let file = new FileReader();
    file.readAsDataURL(fileAddress); // 获取文件url,过程中触发下方 onload 方法
    file.onload = function(){
    	console.log(file.result); //file.result就是转换后的 base64 格式
    }
}

base64 转文件

先将 base64 转换成 blob ,再将 blob 转换成 file 文件

function base64toFile(base64Str,fileName) {
	//1,先将base64转换为blob
    var arr = base64Str.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    let theBlob = new Blob([u8arr], { type: mime });
    
    //2,再将blob转换为file
	theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
	theBlob.name = fileName;                // 文件名
	return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
},

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
js中实现 base64 与文件格式互转,前端,javascript,开发语言,前端,javascript文章来源地址https://www.toymoban.com/news/detail-808086.html

到了这里,关于js中实现 base64 与文件格式互转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3管理系统中后台返回pdf格式的文件流,前端如何预览?以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览?

    后台返回的是base64格式的pdf文件,首先需要解析base64文件的插件 image-tools 1 安装并引入插件 2 封装预览pdf的函数 3 调用接口获取数据

    2024年01月18日
    浏览(83)
  • 前端 img图片如何 展示 base64 格式(并且下载到本地)

    如题:最近在做项目发现页面上有些图片是动态获取的,也就是后台给我们返回图片的存放地址,一般都是放在服务器上的某个位置,我们直接拿到渲染一下就行了,(前提是不存在跨域问题), 但是由于项目特殊性,后台使用了Python 渲染出来的图片是svg格式的图片,并且

    2024年02月09日
    浏览(58)
  • 【JS】前端base64转图片File对象

    base64ToFile.js

    2024年02月05日
    浏览(55)
  • 将图片转换成Base64格式存入数据库以及在前端页面展示

    这个示例接口假设已经有了一个数据库连接池,并且已经注入或初始化了数据源。这个接口的功能是读取指定路径的图片文件,将其转换为Base64编码字符串,然后将其存入数据库中。可以通过调用 saveImageToDB 方法来实现这个功能。调用该方法时需要传入要存储的图片文件的路

    2024年02月16日
    浏览(50)
  • base64转图片及互转

    转换下载到本地 请求头 responseType: “blob” 一定要转。否则格式不对 const blob = new Blob([res.data], { type: “image/jpg” }) 的type一定要写。否则转后的base64打不开 将后台给返回的base64直接拼接的img的:src上 前面加固定的前缀 data:image/png;base64,

    2024年02月16日
    浏览(36)
  • vue:处理base64格式文件pdf、图片预览

    解释一下这段代码的功能: ) preview(item) 是一个函数,接受一个参数 item ,其中包含了文件的相关信息。 )首先,通过条件语句 if (item.type == \\\'pdf\\\') 检查文件类型是否为 \\\'pdf\\\'。 )如果文件类型是 \\\'pdf\\\',则执行以下操作: 使用 webAPI.server.get() 方法发送一个请求,请求的URL是通

    2024年01月18日
    浏览(90)
  • js根据base64下载文件

    项目中有个下载模板的需求,接口直接给返回的是一个base64,如图 这里的bytes不是流格式,而是一个base64格式的,这就导致我们需要先将base64转为了流,然后通过new Blob方式下载文件就行,下面看代码 定义了一个base64转二进制流的方法,接下来开始根据得到的二进制流下载文

    2024年02月17日
    浏览(40)
  • Java Base64 和 File 之间互转

    1、Base64 转 File 2、File 转 Base64

    2024年02月16日
    浏览(39)
  • java和js实现前端加密后端解密,后端加密前端解密(Base64)

    目录 1.前端加密后端解密 2.后端加密前端解密 在前端和后端数据传输时,常常涉及到隐私数据的传输(例如用户名和密码),这时,我们就需要对隐私数据进行加密解密 1.前端加密后端解密         1.1 前端jquery实现         1.2后端 2.后端加密前端解密         2.1后端加密

    2024年02月16日
    浏览(56)
  • 前端base64转file文件方法

    有这样一种场景,比如canvas截取部分dom作为图片,上传到服务器,而canvas截取的图片返回的是base64字符串,而服务器接收的是file文件。因此我们需要将base64字符串转成file文件,存储到服务器中。 方法一:通过new File(),将base64直接转成file文件。 (此方法需要考虑浏览器兼容

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包