一步一步搭建一個(gè)圖片上傳網(wǎng)站（后臺(tái)服務(wù)器用nodejs）
前幾天看了騰訊云社區(qū)的一個(gè)文件上傳的文章 <文件上傳那些事兒> ，大體上講了以下h5中圖片上傳的幾個(gè)核心原理，但是沒(méi)有后端接受的服務(wù)器代碼，沒(méi)法做測(cè)試。也沒(méi)有具體的一個(gè)實(shí)例都是一些基本的原理片段，并且ui界面也不好看，我就準(zhǔn)備給那篇文章作為補(bǔ)充做一個(gè)圖片上傳網(wǎng)站。
效果如圖：
點(diǎn)擊上傳后，會(huì)把文件放到后臺(tái)一個(gè)uploads文件夾下面，如果上傳成功，那么頁(yè)面會(huì) 彈出一個(gè)上傳成功的提示框，如果上傳失敗，會(huì)彈出一個(gè)失敗的提示框，如果網(wǎng)速比較慢，會(huì)顯示出上傳過(guò)程中的進(jìn)度條。
開(kāi)發(fā)準(zhǔn)備
用普通的表單提交方法實(shí)現(xiàn)文件上傳。
1.編寫(xiě)前端代碼
- <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.編寫(xiě)后端測(cè)試用代碼
- 這里我們采用了express框架，需要先安裝這個(gè)框架，然后使用靜態(tài)中間件指定放置我們js css html 文件的目錄
- var app = express();
- app.use(express.static('dist'))
下載處理上傳文件的插件 multer
- 在readme.md文件中有基本的使用方法，我們復(fù)制過(guò)來(lái)代碼實(shí)例稍微改改就可以使用了。把文件上傳路徑指定到uploads,然后用當(dāng)前日期和文件名命名上傳過(guò)來(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è)可愛(ài)的小圖標(biāo)，點(diǎn)擊后選擇文件。
這個(gè)過(guò)于簡(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)聽(tīng) 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)聽(tīng)數(shù)據(jù)上傳事件，并且動(dòng)態(tài)設(shè)置h5進(jìn)度條的value顯示上傳進(jìn)度。如果上傳完成，隱藏進(jìn)度條。
如果服務(wù)器返回的是success，就彈出上傳圖片成功。否則彈出上傳圖片失敗。
總結(jié)
前端利用了FileReader 的readAsDataUrl顯示縮略圖，利用H5 progress標(biāo)簽和監(jiān)聽(tīng)xhr.upload.onprogress顯示進(jìn)度條。利用FormData模擬表單數(shù)據(jù)，用ajax技術(shù)提交到服務(wù)器。
后端利用express建立服務(wù)器，利用static中間件指定js css html 文件路徑。用multer模塊實(shí)現(xiàn)了解析存儲(chǔ)通過(guò) input typle="file" 提交的數(shù)據(jù)。
利用這個(gè)前端ajax和后端nodejs技術(shù)，我們基本上就可以做出一個(gè)圖片上傳存儲(chǔ)的基本網(wǎng)站核心。如果數(shù)據(jù)量比較大我們就可以采用數(shù)據(jù)庫(kù)存儲(chǔ)索引搜索，不過(guò)這已經(jīng)跟前端沒(méi)啥關(guān)系就不展開(kāi)講了。
