怎么用nodejs搭建一個(gè)圖片上傳網(wǎng)站

這篇文章主要講解了“怎么用nodejs搭建一個(gè)圖片上傳網(wǎng)站”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用nodejs搭建一個(gè)圖片上傳網(wǎng)站”吧！

效果如圖：

點(diǎn)擊上傳后，會(huì)把文件放到后臺(tái)一個(gè)uploads文件夾下面，如果上傳成功，那么頁(yè)面會(huì)  彈出一個(gè)上傳成功的提示框，如果上傳失敗，會(huì)彈出一個(gè)失敗的提示框，如果網(wǎng)速比較慢，會(huì)顯示出上傳過程中的進(jìn)度條。

開發(fā)準(zhǔn)備

用普通的表單提交方法實(shí)現(xiàn)文件上傳。

1.編寫前端代碼

<form action="uploadimg" method="POST" enctype="multipart/form-data">         <input type="file" name="imgfile" multiple>         <input type="submit" value="提交">     </form>

• 設(shè)置action為提交地址， enctype="multipart/form-data"

• 設(shè)置提交文件表單域名為 imgfile

2.編寫后端測(cè)試用代碼

• 這里我們采用了express框架，需要先安裝這個(gè)框架，然后使用靜態(tài)中間件指定放置我們js css html 文件的目錄

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

下載處理上傳文件的插件 multer

• 在readme.md文件中有基本的使用方法，我們復(fù)制過來(lái)代碼實(shí)例稍微改改就可以使用了。把文件上傳路徑指定到uploads,然后用當(dāng)前日期和文件名命名上傳過來(lái)的文件。這個(gè)imgfile域名必須嚴(yán)格和前端表單文件域名對(duì)應(yīng)起來(lái)。

完整代碼如下：

"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...'); });

這樣選擇文件，點(diǎn)擊提交按鈕后文件就被上傳到了服務(wù)器uploads文件夾下

用H5和ajax技術(shù)實(shí)現(xiàn)無(wú)刷新文件上傳

1.改造原來(lái)的選擇文件按鈕，讓它變成一個(gè)可愛的小圖標(biāo)，點(diǎn)擊后選擇文件。

這個(gè)過于簡(jiǎn)單就不放代碼了，具體思路是把一個(gè)a標(biāo)簽放上背景圖片，把上傳文件 input type="file"  大小設(shè)置成a標(biāo)簽一樣大，并且放置到a標(biāo)簽上面，opacity設(shè)置成0透明的。點(diǎn)擊a實(shí)際上是點(diǎn)擊了 input type="file"

2.選取文件后生成縮略圖，這個(gè)基本思路是監(jiān)聽 input type="file"  的onchange事件，如果選了文件就利用FileReader生成一個(gè)圖片data:url添加到div.preview里面動(dòng)態(tài)生成的img上，給div.preview設(shè)置成flex布局就可以靈活放置預(yù)覽圖了。

html

<div class="wrap">          <a href="" class="selectImg" title="上傳圖片"></a>         <input type="file" multiple id="file">         <input type="button" value="上傳" id="upload">         <div class="preview"></div>         <div class="progress">             <progress max="100" value="1" item-width="100" id="progress"></progress>         </div>     </div>

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.點(diǎn)擊上傳按鈕上傳圖片

這個(gè)基本思路就是利用Formdata模擬表單，然后用ajax發(fā)送文件到服務(wù)器

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('請(qǐng)先選擇圖片，再上傳！')                 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監(jiān)聽數(shù)據(jù)上傳事件，并且動(dòng)態(tài)設(shè)置h6進(jìn)度條的value顯示上傳進(jìn)度。如果上傳完成，隱藏進(jìn)度條。

如果服務(wù)器返回的是success，就彈出上傳圖片成功。否則彈出上傳圖片失敗。

感謝各位的閱讀，以上就是“怎么用nodejs搭建一個(gè)圖片上傳網(wǎng)站”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用nodejs搭建一個(gè)圖片上傳網(wǎng)站這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！