生活随笔
收集整理的這篇文章主要介紹了
一步一步搭建一个图片上传网站（后台服务器用nodejs）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前幾天看了騰訊云社區的一個文件上傳的文章 <文件上傳那些事兒> ，大體上講了以下h5中圖片上傳的幾個核心原理，但是沒有后端接受的服務器代碼，沒法做測試。也沒有具體的一個實例都是一些基本的原理片段，并且ui界面也不好看，我就準備給那篇文章作為補充做一個圖片上傳網站。
效果如圖：
點擊上傳后，會把文件放到后臺一個uploads文件夾下面，如果上傳成功，那么頁面會 彈出一個上傳成功的提示框，如果上傳失敗，會彈出一個失敗的提示框，如果網速比較慢，會顯示出上傳過程中的進度條。
開發準備
用普通的表單提交方法實現文件上傳。
1.編寫前端代碼
<form?action="uploadimg"?method="POST"?enctype="multipart/form-data">?????????<input?type="file"?name="imgfile"?multiple>?????????<input?type="submit"?value="提交">?????</form>?- 設置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
<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.點擊上傳按鈕上傳圖片
這個基本思路就是利用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監聽數據上傳事件，并且動態設置h5進度條的value顯示上傳進度。如果上傳完成，隱藏進度條。
如果服務器返回的是success，就彈出上傳圖片成功。否則彈出上傳圖片失敗。
總結
前端利用了FileReader 的readAsDataUrl顯示縮略圖，利用H5 progress標簽和監聽xhr.upload.onprogress顯示進度條。利用FormData模擬表單數據，用ajax技術提交到服務器。
后端利用express建立服務器，利用static中間件指定js css html 文件路徑。用multer模塊實現了解析存儲通過 input typle="file" 提交的數據。
利用這個前端ajax和后端nodejs技術，我們基本上就可以做出一個圖片上傳存儲的基本網站核心。如果數據量比較大我們就可以采用數據庫存儲索引搜索，不過這已經跟前端沒啥關系就不展開講了。
作者：佚名
來源：51CTO
總結
以上是生活随笔為你收集整理的一步一步搭建一个图片上传网站（后台服务器用nodejs）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
