资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么用nodejs搭建一个图片上传网站

这篇文章主要讲解了“怎么用nodejs搭建一个图片上传网站”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用nodejs搭建一个图片上传网站”吧！

肃州网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

效果如图：

怎么用nodejs搭建一个图片上传网站

点击上传后，会把文件放到后台一个uploads文件夹下面，如果上传成功，那么页面会  弹出一个上传成功的提示框，如果上传失败，会弹出一个失败的提示框，如果网速比较慢，会显示出上传过程中的进度条。

开发准备

用普通的表单提交方法实现文件上传。

1.编写前端代码

                       

  • 设置action为提交地址， enctype="multipart/form-data"

  • 设置提交文件表单域名为 imgfile

2.编写后端测试用代码

  • 这里我们采用了express框架，需要先安装这个框架，然后使用静态中间件指定放置我们js css html 文件的目录

var app = express(); app.use(express.static('dist'))

下载处理上传文件的插件 multer

  • 在readme.md文件中有基本的使用方法，我们复制过来代码实例稍微改改就可以使用了。把文件上传路径指定到uploads,然后用当前日期和文件名命名上传过来的文件。这个imgfile域名必须严格和前端表单文件域名对应起来。

完整代码如下：

"use strict"; exports.__esModule = true; var express = require("express"); var multer = require("multer"); var storage = multer.diskStorage({     destination: function(req, file, cb) {         cb(null, './uploads');     },     filename: function(req, file, cb) {         cb(null, `${Date.now()}-${file.originalname}`)     } }) var upload = multer({ storage: storage }); var app = express(); app.use(express.static('dist')); //var cpUpload = upload.fields([{ name: 'imgfile', maxCount: 12 }]) app.post('/uploadimg', upload.array('imgfile', 40), function(req, res, next) {     var files = req.files     console.log(files)     if (!files[0]) {         res.send('error');     } else {         res.send('success');     }        console.log(files); })  var server = app.listen(9999, 'localhost', function() {     console.log('server is running at port 9999...'); });

这样选择文件，点击提交按钮后文件就被上传到了服务器uploads文件夹下

用H5和ajax技术实现无刷新文件上传

1.改造原来的选择文件按钮，让它变成一个可爱的小图标，点击后选择文件。

这个过于简单就不放代码了，具体思路是把一个a标签放上背景图片，把上传文件 input type="file"  大小设置成a标签一样大，并且放置到a标签上面，opacity设置成0透明的。点击a实际上是点击了 input type="file"

2.选取文件后生成缩略图，这个基本思路是监听 input type="file"  的onchange事件，如果选了文件就利用FileReader生成一个图片data:url添加到div.preview里面动态生成的img上，给div.preview设置成flex布局就可以灵活放置预览图了。

html

                                     
                               
     

js

fileinput.onchange = () => {             //console.log('dddd')             var files = fileinput.files             let imgDOMArray = new Array(files.length)             let reader = []             let thumbPic = []             progressDOM = document.getElementById('progress-img')             for (let i = 0; i < files.length; i++) {                 reader[i] = new FileReader()                 thumbPic[i] = document.createElement('div')                 imgDOMArray[i] = document.createElement('img')                 imgDOMArray[i].file = files[i]                 thumbPic[i].className = 'thumbPic'                 thumbPic[i].appendChild(imgDOMArray[i])                 previewDOM.appendChild(thumbPic[i])                 reader[i].readAsDataURL(files[i])                 reader[i].onload = (img => {                      return e =>img.src = e.target.result                                      })(imgDOMArray[i])              }         }

3.点击上传按钮上传图片

这个基本思路就是利用Formdata模拟表单，然后用ajax发送文件到服务器

var aUpload = document.querySelector('.selectImg')         var button = document.querySelector('#upload')         var fileinput = document.getElementById('file')         button.onclick = uploadFile          function uploadFile() {             //  console.log('ddd')             var xhr = new XMLHttpRequest()             var formdata = new FormData()              var files = fileinput.files             if (!files[0]) {                 alert('请先选择图片，再上传！')                 return             }              var progress = document.querySelector('progress')             for (let i = 0; i < files.length; i++) {                 formdata.append('imgfile', files[i], files[i].name)             }             xhr.open('POST', '/uploadimg')             xhr.onload = () => {                 if (xhr.status === 200 && xhr.responseText === 'success') {                     previewDOM.innerHTML = ''                     xhr = null                     alert('图片上传成功！')                 }             }             xhr.send(formdata)             xhr.upload.onprogress = e => {                 if (e.lengthComputable) {                     var progressWrap = document.querySelector('.progress')                     progressWrap.style.display = "flex"                     var percentComplete = e.loaded / e.total * 100                     progress.value = percentComplete                      if (percentComplete >= 100) {                         progress.value = 0                         progressWrap.style.display = "none"                     }                 }             }          }

其中利用了xhr.upload.onprogress监听数据上传事件，并且动态设置h6进度条的value显示上传进度。如果上传完成，隐藏进度条。

如果服务器返回的是success，就弹出上传图片成功。否则弹出上传图片失败。

感谢各位的阅读，以上就是“怎么用nodejs搭建一个图片上传网站”的内容了，经过本文的学习后，相信大家对怎么用nodejs搭建一个图片上传网站这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


文章名称：怎么用nodejs搭建一个图片上传网站
链接分享：http://www.cdkjz.cn/article/pdcspp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
四川广告招牌云主机网站制作公司手机网站小程序开发成都企业注册服务四川国泰民安消防不锈钢防护栏盐亭网站制作公司成都二枢机房

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图