zoukankan      html  css  js  c++  java
  • nodejs 上传图片(服务端输出全部代码)

    下面代码,全部都是nodejs端的,不用客户端代码。也就是,选择图片的form表单以及上传完毕预览图片的html,都是由node服务端输出的。

    1 启动代码:(node upload.js)

    var server = require("upload/server");
    var router = require("upload/router");
    var requestHandlers = require("upload/requestHandlers");
    
    var handle = {}
    handle["/"] = requestHandlers.start;
    handle["/start"] = requestHandlers.start;
    handle["/upload"] = requestHandlers.upload;
    handle["/show"] = requestHandlers.show;
    
    server.start(router.route, handle); 

    2 自己封装成upload模块,也就是在node_modules文件夹下有一个upload文件夹。该文件夹下有3个文件,分别如下:

    requestHandlers.js

    var querystring = require("querystring"),
        fs = require("fs"),
        formidable = require("formidable");
    
    function start(response) {
        console.log("Request handler 'start' was called.");
    
        var body = '<html>'+
            '<head>'+
            '<meta http-equiv="Content-Type" content="text/html; '+
            'charset=UTF-8" />'+
            '</head>'+
            '<body>'+
            '<form action="/upload" enctype="multipart/form-data" '+
            'method="post">'+
            '<input type="file" name="upload" multiple="multiple">'+
            '<input type="submit" value="Upload file" />'+
            '</form>'+
            '</body>'+
            '</html>';
    
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write(body);
        response.end();
    }
    
    function upload(response, request) {
        console.log("Request handler 'upload' was called.");
    
        var form = new formidable.IncomingForm();
        form.uploadDir = "F:\nodeTemp\upload";
        console.log("about to parse1");
        form.parse(request, function(error, fields, files) {
            console.log("parsing done");
            console.log(files.upload.path);
            fs.renameSync(files.upload.path, "F:\nodeTemp\upload\test.png");
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write("received image:<br/>");
            response.write("<img src='/show' />");
            response.end();
      });
    }
    
    function show(response) {
        console.log("Request handler 'show' was called.");
        fs.readFile("F:\nodeTemp\upload\test.png", "binary", function(error, file) {
            if(error) {
                response.writeHead(500, {"Content-Type": "text/plain"});
                response.write(error + "
    ");
                response.end();
            } else {
                response.writeHead(200, {"Content-Type": "image/png"});
                response.write(file, "binary");
                response.end();
            }
        });
    }
    
    exports.start = start;
    exports.upload = upload;
    exports.show = show;

    router.js

    function route(handle, pathname, response, request) {
        console.log("About to route a request for " + pathname);
        if (typeof handle[pathname] === 'function') {
            handle[pathname](response, request);
        } else {
            console.log("No request handler found for " + pathname);
            response.writeHead(404, {"Content-Type": "text/html"});
            response.write("404 Not found");
            response.end();
        }
    }
    
    exports.route = route;

    server.js

    var http = require("http");
    var url = require("url");
    
    function start(route, handle) {
      function onRequest(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(handle, pathname, response, request);
      }
    
      http.createServer(onRequest).listen(3001);
      console.log("Server has started.");
    }
    
    exports.start = start;

    3 这个上传图片,是依赖formidable模块的,所以,需要提前通过npm安装好该模块。

    4 还有,这个上传图片,要自己先建立一个文件夹来存放图片。建好之后,把“F:\nodeTemp\upload\test.png”替换就行。

    原文:http://www.cnblogs.com/EricaMIN1987_IT/p/3640450.html

    我根据自己的理解,改动了下。

    可参考:

    http://www.cnblogs.com/thingk/archive/2013/11/25/3434032.html

  • 相关阅读:
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    449. Serialize and Deserialize BST
    114. Flatten Binary Tree to Linked List
    199. Binary Tree Right Side View
    173. Binary Search Tree Iterator
    98. Validate Binary Search Tree
    965. Univalued Binary Tree
    589. N-ary Tree Preorder Traversal
    eclipse设置总结
  • 原文地址:https://www.cnblogs.com/simonbaker/p/4864110.html
Copyright © 2011-2022 走看看