功能需求

1.图片转base64

2.base 64 转二进制数组

3.保存二进制数据到文件下载到本地

解决方法

问题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

参考资料

base 64 转bytes数组

具体代码

    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)
});
}

vue upload 图片转base64、转二进制数组,保存编码数据到文件的更多相关文章

  1. C#图片上传获取二进制流保存至AD

    <form id="form1" runat="server"> <div> <asp:FileUpload ID="F ...

  2. C#中将图片文件转化为二进制数组-用于数据库存储

    在项目开发中,使用SQL Server存储数据,数据类型image可以保存图片.但是在存储之前需要将图片转化为二进制数组的形式进行赋值. 将图片文件转换为二进制数组 /// <summary&g ...

  3. java 图片Base64字符串转图片二进制数组

    public static byte[] base64ToImgByteArray(String base64) throws IOException{ sun.misc.BASE64Decoder ...

  4. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

  5. ios10系统以下原生传来的base64图片无法转化为二进制

    最近在做和原生ios交互上传图片的时候,遇到原生传来的以base64图片位无法转化为二进制.因为前端上传图片的方式是以二进制的方式上传,在ios10 和安卓上,上传图片是可以的:在ios10以下,可以 ...

  6. 图片和base64编码字符串 互相转换,图片和byte数组互相转换

    图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...

  7. 车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#

    万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...

  8. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  9. vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决

    vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor vue-quill ...

  10. 如何用java实现图片与base64转换

    如果你是一个软件开发,不论前端后端工程师,图片的处理你是肯定要会的,关于图片的Base64编码,你可能有点陌生,但是这是一个软件工程师应该要掌握的知识点,现在很多网友把图片与base64转换都做成了小 ...

随机推荐

  1. Springboot tomcat.threads线程数学习

    Springboot tomcat.threads线程数学习 摘要 压测完nginx 突然想搞一下springboot内嵌的tomcat的 threads的参数 一不做二不休, 直接就着脚本进行学习和 ...

  2. qperf 简要总结 - 延迟与带宽信息

    总结 同一个虚拟机: 延迟: 12us 带宽: 6GB/S 同一个物理机上面的虚拟机: 延迟: 50us-100us 带宽: 1.2GB/S 同一个交换机上面的虚拟机: 延迟: 60us 带宽: 12 ...

  3. Docker 部署 Ceph的简单方法

    https://zhuanlan.zhihu.com/p/390377674 学习一下. docker部署 部署的思路和网络架构和前面分布式是一样的,区别在于命令的形式. 在每个节点安装 docker ...

  4. Operating.System.Concepts.10th.Edition中文翻译

    <操作系统概念>是一本很好的书,主要介绍了操作系统的各个层面的概念,包含CPU调度,内存处理,文件系统等,目前已经出到第10版,是一本非常经典的书籍,从第1版至今被国内外众多高校选作教材, ...

  5. 【分享一个工具】根据 /metrics 路径下的文本信息,自动生成包含所有 metrics 的 grafana 报表

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 在做某个服务对应的 grafana 监控报表的时候发现,一 ...

  6. vs code python(Pylance server) crash

    The Pylance server crashed 5 times in the last 3 minutes. The server will not be restarted. See the ...

  7. ElasticSearch深度解析入门篇:高效搜索解决方案的介绍与实战案例讲解,带你避坑

    ElasticSearch深度解析入门篇:高效搜索解决方案的介绍与实战案例讲解,带你避坑 1.Elasticsearch 产生背景 大规模数据如何检索 如:当系统数据量上了 10 亿.100 亿条的时 ...

  8. C# 通过VMI接口获取硬件ID

    使用C#语言实现通过VMI(虚拟机监控器)接口来获取硬件ID的过程.VMI是一种用于虚拟化环境的接口,用于管理虚拟机和宿主机之间的通信和资源共享.具体实现中,需要通过添加System.Manageme ...

  9. SpringCloud-07-Hystrix

    Hystrix 熔断器 1.Hystrix 概述 Hystix 是 Netflix 开源的一个延迟和容错库,用于隔离访问远程服务.第三方库,防止出现级联失败(雪崩). 雪崩:一个服务失败,导致整条链路 ...

  10. AOKO奥科美2.5英寸外置硬盘盒开箱

    上次在坛子里发布了一个帖子,然后根据坛友们的反馈,换购了另一个SATA固态硬盘.另一个是配套的硬盘盒,当时在某宝上搜了一圈,最终购买了这款硬盘盒,主要是因为它的外观,旁边有散热片.这款硬盘盒在某宝上不 ...