书接上回。
我们已经实现了上传图片,那么能不能直接在浏览器中显示我们上传的图片呢?
答案是:能!
在requestHandler.js 里的 upload() 函数中增加一个图像就行了
我们已经实现了上传图片,那么能不能直接在浏览器中显示我们上传的图片呢?
答案是:能!
在requestHandler.js 里的 upload() 函数中增加一个图像就行了
response.write('<img src="/show_upload" />');
如你所想,接下来要增加一个新的路由,使得show_upload读取最新上传的图片内容,并返回
function show_upload(response, request){
console.log("show_upload: "+pic_full_name);
fs.readFile(pic_full_name, "binary", function(error, file){
if(error){
response:writeHead(500, {"Content-Type":"text/plain"});
response.write(error+"\n");
response.end();
}else{
response.writeHead(200, {"Content-Type":"image/png"});
response.write(file, "binary");
response.end();
}
});
}
exports.a = a;
exports.b = b;
exports.upload = upload;
exports.show_upload = show_upload;
请注意,这个pic_full_name就是我们最新上传的文件全路径和名称,那么它从哪里来呢?
它应该是在upload里记录下来, 继续修改requestHandler.js
它应该是在upload里记录下来, 继续修改requestHandler.js
var exec = require("child_process").exec;
var fs = require("fs");
var querystring = require("querystring");
var pic_full_name = ""; //增加一个模块变量
//...function a(){}
//...function b(){}
function upload(response, request){
console.log("request upload");
// parse a file upload
var formidable = require("formidable");
var form = new formidable.IncomingForm();
form.uploadDir = "D:\\Work\\web\\node\\pics";
form.parse(request, function(err, fields, files) {
pic_full_name = "D:\\Work\\web\\node\\pics\\"+files.upload.name;
response.writeHead(200, {'content-type': 'text/html'});
response.write('received upload :\n\n');
response.write('<img src="/show_upload" />');
try{
fs.renameSync(files.upload.path, pic_full_name);
}catch(e){
console.log(e);
}
response.end();
console.log("parse done");
console.log(files);
});
}var exec = require("child_process").exec;
var fs = require("fs");
var querystring = require("querystring");
var pic_full_name = ""; //增加一个模块变量
最后,别忘记在index.js 里配置新生成的路由
config['/show_upload'] = requestHandler.show_upload;
最后,我们来验证。 重启服务器 node index 访问 http://localhost:8888/a
随便选择一张图片,点击submit ,页面跳转到了 http://localhost:8888/upload
同时是不是看到了自己上传的图片啦?
收工!
本课代码:
随便选择一张图片,点击submit ,页面跳转到了 http://localhost:8888/upload
同时是不是看到了自己上传的图片啦?
收工!
本课代码:
lesson-13.zip |