本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下:
效果如下:
前言
前端图片预览用的是 FileReader的readAsDataURL方法
本地图片预览
FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据。
readAsDataURL方法用于读取指定的Blob或文件的内容。当读取操作完成后,readyState就完成了,并且触发了loadend。在那个时候,result属性将数据作为一个URL表示文件的数据,作为base64编码的字符串。
单个图片预览
html 部分
javascript 部分
reader.addEventListener("load",function () {
preview.src = reader.result;
},false);
if (file) {
reader.readAsDataURL(file);
}
}
多张图片预览
html 部分
javascript 部分
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// 支持的图片类型(可自定义)
if ( /.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load",function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
},false);
reader.readAsDataURL(file);
}
}
//files 就是input选中的文件,你也可以对上传图片个数进行限制 (files.length)
if (files) {
[].forEach.call(files,readAndPreview);
}
}
项目中运用
前端部分
html
javascript
js 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)
});
nodejs 部分
nodejs 用的是Multer中间件,这个中间件主要用于上传文件
安装Multer
Multer在nodejs中使用
//磁盘存储引擎(说白了就是指定上传的文件存储到哪,当然你也可以对文件重命名等等)
var storage=multer.diskStorage({
destination: function (req,file,cb) {
//我这里是存储在public下的uploads目录
cb(null,'public/uploads/')
},filename: function (req,cb) {
cb(null,file.fieldname + '-' + Date.Now()+"_" + file.originalname)
}
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/nodejs/35991.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。