使用nodejs怎么实现一个图片预览和上传功能

　　介绍

使用nodejs怎么实现一个图片预览和上传功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>本地图片预览

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

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

<强>单个图片预览

html部分

& lt; input 类型=癴ile", onchange=皃reviewFile()“祝辞& lt; br> 　　https://www.yisu.com/zixun/& lt; img  src="高度=" 200 " alt=巴枷裨だ馈?

javascript部分

function  previewFile (), { 　　,var  preview =, document.querySelector (& # 39; img # 39;); 　　,var  file ,=, document.querySelector(& # 39;输入[类型=文件]& # 39;).files [0]; 　　,var  reader =, new  FileReader (); 　　 　　,reader.addEventListener (“load", function  (), { 　　时间=preview.src 才能;reader.result; 　　,},假); 　　 　　,if (文件),{ 　　reader.readAsDataURL才能(文件); 　　,} 　　}

<>强多张图片预览

html部分

& lt; input  id=癰rowse",类型=癴ile", onchange=皃reviewFiles ()“, multiple> 　　& lt; div  id=皃review"祝辞& lt;/div>

javascript部分

function  previewFiles (), { 　　 　　,var  preview =, document.querySelector(& # 39; #预览# 39;); 　　,var  files ,=, document.querySelector(& # 39;输入[类型=文件]& # 39;).files; 　　 　　,function  readAndPreview(文件),{//,才能支持的图片类型(可自定义) 　　if 才能;(/\。(jpe ? g | png | gif) $/信息技术(file.name),), { 　　,,var  reader =, new  FileReader (); 　　 　　,,reader.addEventListener (“load",, function  (), { 　　,,,var  image =, new 图像(); 　　,,,image.height =, 100; 　　,,,image.title =, file.name; 　　,,,image.src =, this.result; 　　,,,preview.appendChild (, image ); 　　,,,},假); 　　 　　,,reader.readAsDataURL(文件); 　　,,} 　　 　　,} 　　,//files 就是输入选中的文件,你也可以对上传图片个数进行限制,(files.length) 　　,if (文件),{ 　　[]才能.forEach.call(文件、,readAndPreview); 　　,} 　　 　　}

<强>项目中运用

前端部分html

& lt; input  id=皌xtUploadFile",类型=癴ile"比; 　　& lt; input  id=皌xtUploadFileList",类型=癴ile",接受=巴枷?jpeg图像/png图像/gif", multiple 类=皍pload-file"比; 　　& lt; div  id=皃review"祝辞& lt;/div> 　　& lt; input  id=癰tnSend",类型=癰utton", value=https://www.yisu.com/zixun/狈⑺汀崩? " btn btn-default ">

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

, $(函数(){ 　　,,,var 上传={ 　　,,,,,txtUploadFile:美元(& # 39;# txtUploadFile& # 39;),,//上传单个文件 　　,,,,,txtUploadFileList:美元(& # 39;# txtUploadFileList& # 39;),,//上传多个文件 　　,,,,,btnSend:美元(& # 39;# btnSend& # 39;),,//上传文件 　　,,,,,预览:美元(& # 39;#预览# 39;),//图片预览盒子 　　,,,,,//预览图片加载 　　,,,,,previewImgLoad:函数(文件列表){ 　　,,,,,,,,(var 我=0;i ,/* 　　,,,上传单个文件 　　,,,这里是输入改变时后直接上传(用于修改用户头像) 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用nodejs怎么实现一个图片预览和上传功能