当前位置:Gxlcms > JavaScript > nodejs实现图片预览和上传的示例代码

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

时间:2021-07-01 10:21:17 帮助过:9人阅读

本篇文章主要介绍了nodejs 图片预览和上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

效果如下:

前言

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

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

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

本地图片预览

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

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

单个图片预览

html 部分


<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

javascript 部分


多张图片预览

html 部分


<input id="browse" type="file" onchange="previewFiles()" multiple>
<p id="preview"></p>

javascript 部分


项目中运用

前端部分

html


<input id="txtUploadFile" type="file">
<input id="txtUploadFileList" type="file" accept="image/jpeg,image/png,image/gif" multiple class="upload-file">
<p id="preview"></p>
<input id="btnSend" type="button" value="发送" class="btn btn-default">

javascript

js 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)





nodejs 部分

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

安装Multer


npm install --save multer

Multer在nodejs中使用


单个图片上传


多张图片上传


以上就是nodejs实现图片预览和上传的示例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行