檔案上傳加nodejs簡單伺服器
阿新 • • 發佈:2018-11-09
1.隨便找一個空的資料夾,執行命令,有提示之後一路回車:
npm init
2.安裝express:
npm install express --save
3.在建好的專案下建一個server.js,在server.js寫上一下程式碼:
var express = require('express'); var app = express(); // var bodyParser = require('body-parser'); // 建立 application/x-www-form-urlencoded 編碼解析 // var urlencodedParser = bodyParser.urlencoded({ extended: false }) //設定跨域訪問,這一段好像沒用 // app.all('*', function(req, res, next) { // res.header("Access-Control-Allow-Origin", "*"); // res.header("Access-Control-Allow-Headers", "X-Requested-With"); // res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); // res.header("X-Powered-By",' 3.2.1') // res.header("Content-Type", "application/json;charset=utf-8"); // next(); // }); // 解決跨域 var cors = require('cors'); app.use(cors()); // app.use(express.static('public')); // app.get('/index.html', function (req, res) { // res.sendFile( __dirname + "/" + "index.html" ); // }) // let i=0 app.post('/uploadfile', function (req, res) { console.log("--------------------------------------------------------------------------------------------------------------------------------------") console.log(req) // 輸出 JSON 格式 // res.end(JSON.stringify(req)); }) var server = app.listen(8088, function () { // var host = server.address().address // var port = server.address().port // console.log(host); // console.log(port) console.log("應用例項,訪問地址為 http://127.0.0.1:8088") })
4.在你新建的這個資料夾下,最好去官網下載好nodejs,比較好用的就是nodemon,nodemon會熱更新,執行以下命令啟動伺服器:
node server.js
5.隨便找一個資料夾新建一個index.html檔案,寫上以下程式碼:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" id="fileinput" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(() => { // Options here const chunkSize = 1024 * 1024 * 50; // 50MB const url = 'http://localhost:8088/uploadfile'; const crazyMode = false; $('#fileinput').change((e) => { const file = e.target.files[0]; console.log(file); if (file) { const filename = Math.random() + '.apk'; const blobArr = []; const chunkNum = Math.ceil(file.size / chunkSize); console.log('before slice', Date.now()); // Slice file for (let i = 0; i < chunkNum; i++) { const start = i * chunkSize; const end = start + chunkSize; // https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice blobArr.push(file.slice(start, end)); } console.log('after slice', blobArr, Date.now()); if (crazyMode) { // Post all in same time const promiseArr = blobArr.map((blob, i) => { const data = new FormData(); data.append('name', filename); data.append('chunk', i); data.append('chunks', blobArr.length); data.append('Filename', file.name); data.append('size', file.size); data.append('file', blob); return fetch(url, { method: 'POST', cache: 'no-cache', headers: { 'Content-Length': blob.size, }, body: data, }); }); Promise.all(promiseArr).then((results) => { // call the server to concat chunks return fetch(url, { method: 'POST', cache: 'no-cache', headers: { 'content-type': 'application/json', }, body: { filename: filename, finished: 1, }, }); }).then(() => { console.log('finished', Date.now()); }).catch(e => console.log(e)); } else { // Post all one by one (async () => { for (let i = 0; i < blobArr.length; i++) { const blob = blobArr[i]; const data = new FormData(); data.append('name', filename); data.append('chunk', i); data.append('chunks', blobArr.length); data.append('Filename', file.name); data.append('size', file.size); data.append('file', blob); try { console.log('before fetch data', i, Date.now()); await fetch(url, { method: 'POST', cache: 'no-cache', headers: { 'Content-Length': blob.size, }, body: data, }); console.log('after fetch data', i, Date.now()); } catch (e) { console.log(e); } } })(); console.log('finished', Date.now()); } } }); }); </script> </body> </html>