摘要：把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務器，利用中間件指定文件路徑。利用這個前端和后端技術，我們基本上就可以做出一個圖片上傳存儲的基本網站核心。

前幾天看了騰訊云社區的一個文件上傳的文章文件上傳那些事兒，大體上講了以下h5中圖片上傳的幾個核心原理，但是沒有后端接受的服務器代碼，沒法做測試。也沒有具體的一個實例都是一些基本的原理片段，并且ui界面也不好看，我就準備給那篇文章作為補充做一個圖片上傳網站。
效果如圖：

點擊上傳后，會把文件放到后臺一個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文件夾下

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("ffffdd")
            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("ffffd")
            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技術，我們基本上就可以做出一個圖片上傳存儲的基本網站核心。如果數據量比較大我們就可以采用數據庫存儲索引搜索，不過這已經跟前端沒啥關系就不展開講了。

獲取代碼