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)
});
}
vue upload 图片转base64、转二进制数组,保存编码数据到文件的更多相关文章
- C#图片上传获取二进制流保存至AD
<form id="form1" runat="server"> <div> <asp:FileUpload ID="F ...
- C#中将图片文件转化为二进制数组-用于数据库存储
在项目开发中,使用SQL Server存储数据,数据类型image可以保存图片.但是在存储之前需要将图片转化为二进制数组的形式进行赋值. 将图片文件转换为二进制数组 /// <summary&g ...
- java 图片Base64字符串转图片二进制数组
public static byte[] base64ToImgByteArray(String base64) throws IOException{ sun.misc.BASE64Decoder ...
- 【antd Vue】封装upload图片上传组件(返回Base64)
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
- ios10系统以下原生传来的base64图片无法转化为二进制
最近在做和原生ios交互上传图片的时候,遇到原生传来的以base64图片位无法转化为二进制.因为前端上传图片的方式是以二进制的方式上传,在ios10 和安卓上,上传图片是可以的:在ios10以下,可以 ...
- 图片和base64编码字符串 互相转换,图片和byte数组互相转换
图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...
- 车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#
万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...
- JS上传图片-通过FileReader获取图片的base64
下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...
- vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决
vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor vue-quill ...
- 如何用java实现图片与base64转换
如果你是一个软件开发,不论前端后端工程师,图片的处理你是肯定要会的,关于图片的Base64编码,你可能有点陌生,但是这是一个软件工程师应该要掌握的知识点,现在很多网友把图片与base64转换都做成了小 ...
随机推荐
- 基于OpenIM 实现聊天机器人功能
### 简要描述 使用 OpenIM 中的 Webhook 机制实现聊天机器人功能.发送文本消息或图片消息给聊天机器人后,机器人会返回相同的消息.开发者可以替换此逻辑,在LangChain框架上调用L ...
- LeetCode贪心算法习题讲解
实验室的算法课程,今天轮到我给师弟师妹们讲贪心算法,顺便也复习一下. 贪心算法这个名字听起来唬人,其实通常是比较简单的.虽然通常贪心算法的实现非常容易,但是,一个问题是否能够使用贪心算法,是一定要小心 ...
- 【七】强化学习之Policy Gradient---PaddlePaddlle【PARL】框架{飞桨}
相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...
- 【七】强化学习、gym学习平台扩充,更好的玩转虚拟环境,关于mujoco、mujoco-py、baselines安装配置
相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...
- VUE3子表格嵌套分页查询互相干扰的问题解决
VUE3在表格中嵌套子表格子表格的分页查询互相干扰的问题解决 简单嵌套 如果不需要做子表格的分页查询,那么可以直接在主表格中嵌套子表格,有两种方式:一种是主表格加载的同时加载子表格数据,另一种是点击展 ...
- VB6各类源码开源 - 开源研究系列文章
今天把以前下载整理的关于VB6的一些代码进行了开源,覆盖了多个分类内容,需要的朋友请下载: VB6源码.part1 https://download.csdn.net/download/lzhdim/ ...
- SQL布尔盲注
看不到回显时使用盲注 布尔盲注 在进行SQL注入时,web页面仅返回True和False 布尔盲注会根据web页面返回的True或者False信息,对数据库中的信息,对数据库中的信息进行猜解,并获取数 ...
- curl接口调用
CURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 CURL 库.使用PHP的CURL 库可以简单和有效地去抓网页.你只 ...
- 案例:记录一则强制开库遭遇ORA-16433的处理过程
客户的一套开发环境,大概了解到的背景是清理空间时redo被运维人员当作log误删除,一线同事先接手处理,过程中遇到问题升级到我这里继续分析. 接手后,数据库处于mount状态,之前恢复过程中已经做过r ...
- .NET 云原生架构师训练营(模块二 基础巩固 日志)--学习笔记
2.2.2 核心模块--日志 ILogger 的使用 日志的 ID 日志的分类 日志的级别 LoggerProvider 日志的最佳实践 .NET Core 和 ASP.NET Core 中的日志记录 ...