使用原生javascript程式碼寫node的上傳
阿新 • • 發佈：2018-11-08
服務端使用nodejs獲取客戶端傳遞的圖片和檔案資料
涉及模組：http,FileSystem,querystring,url等模組，還有get,post請求處理模組和靜態檔案管理模組
檔案上傳和圖片上傳到前端頁面原則上都是一致：主要通過post file資料
/* 首先require 載入兩個模組 */
var http = require('http'),
fs = require('fs'),
url = require('url'),
httpParam = require('./http_param'),
staticModule = require('./static_module'),
formidable = require("formidable");
var BASE_DIR = __dirname;
http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;//url請求路徑
if(pathname == '/favicon.ico'){//過濾請求
return;
}
switch(pathname){
case '/upload' : upload(res, req);
break;
case '/image' : showImage(res, req);
break;
case '/' : defaultIndex(res);
break;
case '/index' : defaultIndex(res);
case '/show' : show(res);
break;
default : staticModule.getStaticFile(pathname, res, req);
break;
}
}).listen(3000);
function defaultIndex(res){
/* 獲取當前index.html的路徑 */
var readPath = __dirname + '/' +url.parse('index.html').pathname;
var indexPage = fs.readFileSync(readPath);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
}
function upload(res, req){
var readPath = __dirname + '/' + url.parse('show_image.html').pathname;//獲取show_image.html檔案的路徑
var indexPage = fs.readFileSync(readPath);//獲取show_image.html檔案的資料
var form = new formidable.IncomingForm();//執行表單資料解析，獲取其中的post引數
form.uploadDir = "./uploadFile";//重要的一步
form.parse(req, function(error, fields, files) {//獲取檔案上傳資料
fs.renameSync( files.image.path, BASE_DIR+ '/uploadFile/test.png');//同步獲取上傳檔案，並儲存在/uploadFile下
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
});
}
function show(res){
var readPath = __dirname + '/' +url.parse('show_image.html').pathname;
var indexPage = fs.readFileSync(readPath);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
}
function showImage(res, req){
var retData = {'retCode':0, 'imageUrl': '/uploadFile/test.png'};
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end(JSON.stringify(retData));
}
1、 建立formidable.IncomingForm（）返回的物件
2、 呼叫parse方法獲取files的資訊
注：表單中enctype="multipart/form-data"的意思，是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，才能完整的傳遞檔案資料，進行下面的操作.
涉及模組：http,FileSystem,querystring,url等模組，還有get,post請求處理模組和靜態檔案管理模組
檔案上傳和圖片上傳到前端頁面原則上都是一致：主要通過post file資料
/* 首先require 載入兩個模組 */
var http = require('http'),
fs = require('fs'),
url = require('url'),
httpParam = require('./http_param'),
staticModule = require('./static_module'),
formidable = require("formidable");
var BASE_DIR = __dirname;
http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;//url請求路徑
if(pathname == '/favicon.ico'){//過濾請求
return;
}
switch(pathname){
case '/upload' : upload(res, req);
break;
case '/image' : showImage(res, req);
break;
case '/' : defaultIndex(res);
break;
case '/index' : defaultIndex(res);
case '/show' : show(res);
break;
default : staticModule.getStaticFile(pathname, res, req);
break;
}
}).listen(3000);
function defaultIndex(res){
/* 獲取當前index.html的路徑 */
var readPath = __dirname + '/' +url.parse('index.html').pathname;
var indexPage = fs.readFileSync(readPath);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
}
function upload(res, req){
var readPath = __dirname + '/' + url.parse('show_image.html').pathname;//獲取show_image.html檔案的路徑
var indexPage = fs.readFileSync(readPath);//獲取show_image.html檔案的資料
var form = new formidable.IncomingForm();//執行表單資料解析，獲取其中的post引數
form.uploadDir = "./uploadFile";//重要的一步
form.parse(req, function(error, fields, files) {//獲取檔案上傳資料
fs.renameSync( files.image.path, BASE_DIR+ '/uploadFile/test.png');//同步獲取上傳檔案，並儲存在/uploadFile下
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
});
}
function show(res){
var readPath = __dirname + '/' +url.parse('show_image.html').pathname;
var indexPage = fs.readFileSync(readPath);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexPage);
}
function showImage(res, req){
var retData = {'retCode':0, 'imageUrl': '/uploadFile/test.png'};
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end(JSON.stringify(retData));
}
1、 建立formidable.IncomingForm（）返回的物件
2、 呼叫parse方法獲取files的資訊
注：表單中enctype="multipart/form-data"的意思，是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，才能完整的傳遞檔案資料，進行下面的操作.