日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

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ā)送文件到服務器

 
 
 
 
  
  
  
  
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)設置h5進度條的value顯示上傳進度。如果上傳完成，隱藏進度條。

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

總結(jié)

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

后端利用express建立服務器，利用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)系就不展開講了。

獲取代碼