服务端使用nodejs获取客户端传递的图片和文件数据
涉及模块:http,FileSystem,querystring,url等模块,还有get,post请求处理模块和静态文件管理模块
文件上传和图片上传到前端页面原则上都是一致:主要通过post file数据
/* 首先require 加载两个模块 */
var http = require('http'),
fs = require('fs'),
url = require('url'),
querystring = require('querystring'),//处理字符串
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请求路径
httpParam.init(req, res);//初始化GET和POST参数获取模块httpParam的req和res
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);
break;
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,才能完整的传递文件数据,进行下面的操作.
使用原生javascript代码写node的上传
最新推荐文章于 2023-05-31 14:18:17 发布