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

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

效果如下：

前言

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

前端图片预览用的是文件阅读器的readAsDataURL方法

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

本地图片预览

文件阅读器对象允许网应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区)的内容，使用文件或一滴对象来指定要读取的文件或数据。

readAsDataURL方法用于读取指定的一滴或文件的内容。当读取操作完成后，readyState就完成了，并且触发了负载端。在那个时候，结果属性将数据作为一个统一资源定位器表示文件的数据，作为base64编码的字符串。

单个图片预览

超文本标记语言部分

输入类型=' file ' on change=' preview file()' brimg src=' http : ' height=' 200 ' alt=' Image preview . '爪哇岛描述语言部分

函数预览文件(){ var preview=document。query selector(' img ')；var文件=文档。query selector(' input[type=file]').文件[0];var reader=new FileReader()；reader.addEventListener('load '，function(){ preview。src=阅读器。结果；}，false)；如果(文件){ reader.readAsDataURL(文件);}}多张图片预览

超文本标记语言部分

输入id='浏览'类型=' file ' on change=' preview files()' multiplediv id=' preview '/div JavaScript部分

函数预览文件(){ var preview=document。queryselector(“预览”)；var文件=文档。query selector(' input[type=file]').文件；函数readAndPreview(文件){ //支持的图片类型（可自定义)if (/\ .(jpe？g | png | gif)$/I . test(文件。name)){ var reader=new FileReader()；reader.addEventListener('load '，function(){ var Image=new Image()；image.height=100image。title=文件。姓名；图像。src=这个。结果；preview.appendChild(图像);}，false)；reader.readAsDataURL(文件);} }//文件就是投入选中的文件，你也可以对上传图片个数进行限制(文件。长度)if(文件){[]。foreach。调用(文件，read andreview)；}}项目中运用

前端部分

超文本标记语言

输入id=' TxTuploadfile '类型=' file '输入id=' TxTuploadfilelist '类型=' file '接受=' image/JPEG，image/png，image/gif ' multiple class=' upload-file ' div id=' preview '/divinput id=' btnSend '类型=' button ' value='发送=' BTN BTN-默认' JavaScript

射流研究…方法部分拆开了下，放在一个代码块中有点长（阅读时请查看上下文)

$(function(){ var upload={ TxTuploadfile : $(' # TxTuploadfile ')，//上传单个文件txtuloadfilelist : $(' # txtuloadfilelist ')，//上传多个文件btnSend:$('#btnSend ')，//上传文件preview:$('#preview ')，//图片预览盒子//预览图片加载previewmgload :函数(文件列表){ for(var I=0；ifilelist . lengthi){ var tempFile=file list[I]；var reader=new FileReader()；读者。readasdataurl(TempFile)；reader.onload=函数{ var Image=new Image()；image.height=100image。title=tempfile。姓名；图像。src=e .目标。结果；上传.预览.追加(图像);} } } } });/* 上传单个文件这里是投入改变时后直接上传（用于修改用户头像)你也可以在点击上传按钮后再上传，下面的多图上传会给出案例*/上传。txtuploadfile。change(function(){ var formData=new formData()；formData.append('avatar '，上传。txtuplefile[0]).文件[0]);$.ajax({ url: '/upload/file '，type: 'post '，cache: false，data: formData，processData: false，contentType: false，success : function(RES){ console。日志('上传成功');}，错误：函数(){ console。日志(“上传失败”)；} });});//加载预览图片上传。txtuloadfilelist。change(function(){ var fileList=this。文件；上传。previewmgload(文件列表)；});//上传多张图片上传。btnsend。单击(function(){ var files=upload。txtuloadfilelist。道具('文件')；if(files.length==0){ //没有选择文件直接返回返回；} var formData=new formData()；for(var I=0；ifiles . lengthi){ formdata . append('照片，文件[I])；} $.Ajax({ URL : '/upload/filestlist '，type: 'post '，cache: false，data: formData，processData: false，contentType: false，success : function(RES){ console。日志('上传成功');//到这里图片已经上传成功了。你可根据返回结果处理其他的业务逻辑if(res.status==1){ //todo某物} }，错误： function(){ console。日志(“上传失败”)；} });});nodejs部分

nodejs用的是Multer中间件，这个中间件主要用于上传文件

安装Multer

国家预防机制安装-保存多用户在nodejs中使用

var express=require(' express ')；var multer=require(' multer ')；var app=express()；//磁盘存储引擎（说白了就是指定上传的文件存储到哪，当然你也可以对文件重命名等等)var storage=multer。磁盘存储({目标：函数(req，file，cb) { //我这里是存储在公众的下的上传目录cb(null，‘public/uploads/’)}，filename:函数(请求，文件，cb) { cb(null，文件。字段名'-。约会。now()' _ '文件。原名)} })；单个图片上传

//如果图片上传成功会返回图片的存储路径app.post('/upload/file '，upload.single('avatar ')，function(req，res) { if(！req.file) { console.log('未收到文件');return res.send({ status: 0，文件路径： ' ' })；} else { console.log('收到文件');res.send({ status:1，文件路径： '/uploads/'路径。basename(请求。文件。路径)})；}});多张图片上传

//如果图片上传成功会返回图片的存储路径（数组)app。post('/upload/filestlist '，upload.array('photos '，9)，function(req，RES){ if(req。文件==未定义){控制台。日志('未收到文件');return res.send({ status: 0，文件路径： ' ' })；} else { var filesPathArr=[]；for(var I=0；艾瑞克。文件。长度；I){ FilePathArr。push('/uploads/'路径。basename(请求。文件[1]).路径));} res.send({ status:1，FilePathArr : })；}});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。