nodejs 图片预览和上传的示例代码

前端之家收集整理的这篇文章主要介绍了nodejs 图片预览和上传的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了nodejs 图片预览和上传的示例代码分享给大家,具体如下:

效果如下:

前言

一般在上传图片之前需要暂存在本地预览一下。

前端图片预览用的是 FileReader的readAsDataURL方法

nodejs 图片上传用的是中间件 Multer

本地图片预览

FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据。

readAsDataURL方法用于读取指定的Blob或文件内容。当读取操作完成后,readyState就完成了,并且触发了loadend。在那个时候,result属性将数据作为一个URL表示文件的数据,作为base64编码的字符串。

单个图片预览

html 部分

Image preview...

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 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)

上传单个文件 txtUploadFileList:$('#txtUploadFileList'),//上传多个文件 btnSend:$('#btnSend'),//上传文件 preview:$('#preview'),//图片预览盒子 //预览图片加载 previewImgLoad:function(fileList){ for(var i=0;i
上传单个文件 这里是input改变时后直接上传(用于修改用户头像) 你也可以在点击上传按钮后再上传,下面的多图上传会给出案例 */ upload.txtUploadFile.change(function(){ var formData = new FormData(); formData.append('avatar',upload.txtUploadFile[0].files[0]); $.ajax({ url: '/upload/file',type: 'post',cache: false,data: formData,processData: false,contentType: false,success:function(res){ console.log('upload success'); },error:function(){ console.log('upload faild'); } }); });
图片 upload.txtUploadFileList.change(function(){ var fileList=this.files; upload.previewImgLoad(fileList); });
上传多张图片 upload.btnSend.click(function(){ var files = upload.txtUploadFileList.prop('files'); if(files.length==0){ //没有选择文件直接返回 return; } var formData=new FormData(); for(var i=0;i图片已经上传成功了.你可根据返回结果处理其他的业务逻辑 if(res.status==1){ // todo something } },error:function(){ console.log('upload faild'); } });
});

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

单个图片上传

图片上传成功会返回图片的存储路径 app.post('/upload/file',upload.single('avatar'),function(req,res) { if (!req.file) { console.log("no file received"); return res.send({ status: 0,filePath:'' }); } else { console.log('file received'); res.send({ status:1,filePath: '/uploads/' + path.basename(req.file.path) }); } });

多张图片上传

图片上传成功会返回图片的存储路径(数组) app.post('/upload/filesList',upload.array('photos',9),res) { if (req.files==undefined) { console.log("no files received"); return res.send({ status: 0,filePath:'' }); } else { var filesPathArr=[]; for(var i=0;i

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/nodejs/35991.html

猜你在找的Node.js相关文章