vue 上传二进制图片
1.前段代码
<el-form-item label="证件照片" prop="idImage">
<input @change='ss' type="file">
</el-form-item>
2.script代码
ss(event){
var reader =new FileReader();//创建读取文件的方法
var img1=event.target.files[];
reader.readAsDataURL(img1);//将文件已url的形式读入页面
var that=this;
reader.onload=function(e){
that.ruleForm.idImage= reader.result; //把图片的二进制流付给表单ruleForm里面的idImage
}
// console.log();
},
3.我的后端用的是koa2
用的是fs模块写入
var base64Data = (ctx.request.body.idImage).replace("data:image/jpeg;base64,", " ");//如果是express框架的话只需要换成req.body.idImage
console.log(base64Data);
var binaryData = new Buffer(base64Data, "base64").toString("binary");
fs.writeFile("out.png", binaryData, "binary", function(err) {
if (err) {
console.log(err);
}
});
vue 上传二进制图片的更多相关文章
- 基于vue上传base64图片,通过canvas压缩base64
其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下 网上都有相应的解答 .. var that = this if (e. ...
- 上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- vue : 检测用户上传的图片的宽高
需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...
- ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合
一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
- js如何展示上传的图片
前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...
- 海康NVR设备上传人脸图片到人脸库
海康开放平台--海康文档链接--海康开发包和文档下载链接 硬件:海康超脑NVR(全称Network Video Recorder,即网络视频录像机).人脸摄像机. 环境:JDK_1.8 Windows ...
- thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印
今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...
随机推荐
- deviceToken的获取(二)
第一步:申请证书: 第二步:申请app ids,应用名字必须一致.然后再进入进行编辑,使其enable,绿灯. 第三步:申请provisioning profile,生成.mobileprovisio ...
- 利用CocoaPods管理本地工程和发布开源框架
发布自己三方框架 发布云端库 1.创建spec pod spec create xxx 2.编辑spec s.name:名称,pod search 搜索的关键词,注意这里一定要和.podspec的名称 ...
- Example 1 - XY plots
http://www.ncl.ucar.edu/Document/Manuals/Getting_Started/Examples/gsun01n.shtml Frame 1 Frame 2 Fram ...
- 20145229吴姗珊两天小总结 《Java程序设计》第4周学习总结
20145229吴姗珊两天小总结 <Java程序设计>第4周学习总结 教材学习内容总结 由于自己的基础不好对知识的理解不透彻,所以这两天的学习还是集中在第六章和第七章,对知识点多了一点理解 ...
- hd acm2035
求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方” 思路:后三位只跟后三位相乘有关,所以可以每乘一次都对1000取余. 代码: #include <stdio.h>#inc ...
- nginx源码中upstream的主要流程
upstream 即上游的意思,是一个想对到概念,从客户端到中间的网络链路到服务器到链路中,可以将越接近客户到设备越理解成下游,相反到为上游,所以如果只有一个upstream,可以将其为理解成转发客户 ...
- 用python实现的抓取腾讯视频所有电影的爬虫
1. [代码]用python实现的抓取腾讯视频所有电影的爬虫 # -*- coding: utf-8 -*-# by awakenjoys. my site: www.dianying.atim ...
- Codeforces 479E Riding in a Lift:前缀和/差分优化dp
题目链接:http://codeforces.com/problemset/problem/479/E 题意: 有一栋n层的房子. 还有一个无聊的人在玩电梯,每次玩电梯都会从某一层坐到另外一层. 他初 ...
- Fireworks(whole page)
<!DOCTYPE HTML> <html> <head> <title>Canvas 实现放烟花特效</title> <meta c ...
- Centos安装SZRZ方便文件传输
方便Centos服务器传输文件, 要用到szrz命令, 具体安装如下: # wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz# ta ...