一步一步搭建一個圖片上傳網站（後臺服務器用nodejs）

時間 2019-11-07

原文原文鏈接

前幾天看了騰訊雲社區的一個文件上傳的文章文件上傳那些事兒，大致上講了如下h5中圖片上傳的幾個核心原理，可是沒有後端接受的服務器代碼，無法作測試。也沒有具體的一個實例都是一些基本的原理片斷，而且ui界面也很差看，我就準備給那篇文章做爲補充作一個圖片上傳網站。
效果如圖：css

點擊上傳後，會把文件放到後臺一個uploads文件夾下面，若是上傳成功，那麼頁面會彈出一個上傳成功的提示框，若是上傳失敗，會彈出一個失敗的提示框，若是網速比較慢，會顯示出上傳過程當中的進度條。html

開發準備

用普通的表單提交方法實現文件上傳。

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"node
設置提交文件表單域名爲imgfilegit

2.編寫後端測試用代碼github

這裏咱們採用了express框架，須要先安裝這個框架，而後使用靜態中間件指定放置咱們js css html 文件的目錄ajax

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

下載處理上傳文件的插件multer
在readme.md文件中有基本的使用方法，咱們複製過來代碼實例稍微改改就可使用了。把文件上傳路徑指定到uploads,而後用當前日期和文件名命名上傳過來的文件。這個imgfile域名必須嚴格和前端表單文件域名對應起來。數據庫

完整代碼以下：express

"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>

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技術，咱們基本上就能夠作出一個圖片上傳存儲的基本網站核心。若是數據量比較大咱們就能夠採用數據庫存儲索引搜索，不過這已經跟前端沒啥關係就不展開講了。

獲取代碼