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

效果如圖：

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

開發(fā)準備

用普通的表單提交方法實現(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.編寫后端測試用代碼

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

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

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

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

完整代碼如下：

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

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

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

1.改造原來的選擇文件按鈕，讓它變成一個可愛的小圖標，點擊后選擇文件。

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

2.選取文件后生成縮略圖，這個基本思路是監(jiān)聽 input type="file" 的onchange事件，如果選了文件就利用FileReader生成一個圖片data:url添加到div.preview里面動態(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.點擊上傳按鈕上傳圖片

這個基本思路就是利用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('請先選擇圖片，再上傳！') 
                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ù)上傳事件，并且動態(tài)設(shè)置h5進度條的value顯示上傳進度。如果上傳完成，隱藏進度條。

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

總結(jié)

前端利用了FileReader 的readAsDataUrl顯示縮略圖，利用H5 progress標簽和監(jiān)聽xhr.upload.onprogress顯示進度條。利用FormData模擬表單數(shù)據(jù)，用ajax技術(shù)提交到服務(wù)器。

后端利用express建立服務(wù)器，利用static中間件指定js css html 文件路徑。用multer模塊實現(xiàn)了解析存儲通過 input typle="file" 提交的數(shù)據(jù)。

利用這個前端ajax和后端nodejs技術(shù)，我們基本上就可以做出一個圖片上傳存儲的基本網(wǎng)站核心。如果數(shù)據(jù)量比較大我們就可以采用數(shù)據(jù)庫存儲索引搜索，不過這已經(jīng)跟前端沒啥關(guān)系就不展開講了。

獲取代碼