vue upload 图片转base64、转二进制数组,保存编码数据到文件
功能需求
解决方法
问题1:
参考资料
vue element upload图片 转换成base64
具体代码
getBase64(file) { return new Promise(function (resolve, reject) { let reader = new FileReader(); let imgResult = ""; reader.readAsDataURL(file); reader.onload = function () { imgResult = reader.result; }; reader.onerror = function (error) { reject(error); }; reader.onloadend = function () { resolve(imgResult); }; }); } beforeUpload(file) { this.getBase64(file).then(res => { console.log(res); }) }
问题2
参考资料
具体代码
beforeUpload(file) { var fileName = file.name || '' this.getBase64(file).then(res => { // console.log(res); //二进制数组转换 var bytes = window.atob(res.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } console.log("ia", ia) });
}
问题3
参考资料
具体实施
参考资料里面的方法二
具体代码
function downFile(json1) { var elementA = document.createElement('a'); elementA.setAttribute('href', 'data:text/plain;charset=utf-8,' + json1); elementA.setAttribute('download', +new Date() + ".txt"); elementA.style.display = 'none'; document.body.appendChild(elementA); elementA.click(); document.body.removeChild(elementA); }, beforeUpload(file) { var fileName = file.name || '' this.getBase64(file).then(res => { // console.log(res); //二进制数组转换 var bytes = window.atob(res.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } this.downFile(ia) console.log("ia", ia) }); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2019-05-29 webapi ClaimsPrincipal使用
2019-05-29 webapi 集成NLog
2018-05-29 阿里云redis映射到阿里云服务器
2018-05-29 C# 输出字符串到文本文件中