नोडज का उपयोग करके छवि की सेवा कैसे करें


147

मेरे पास एक लोगो है जो जनता / छवियों / लोगो पर आधारित है। यहाँ मेरा नोडज कोड है।

http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain' });
  res.end('Hello World \n');
}).listen(8080, '127.0.0.1');

यह काम करता है लेकिन जब मैं लोकलहोस्ट के लिए अनुरोध करता हूं: 8080 / logo.gif तो मुझे स्पष्ट रूप से मुझे लोगो नहीं मिलता है।

एक छवि की सेवा के लिए मुझे क्या परिवर्तन करने की आवश्यकता है।

जवाबों:


224

2016 अपडेट

एक्सप्रेस और बिना एक्सप्रेस के उदाहरण जो वास्तव में काम करते हैं

यह सवाल 5 साल से अधिक पुराना है लेकिन हर उत्तर में कुछ समस्याएं हैं

टी एल; डॉ

उदाहरणों के लिए नीचे स्क्रॉल करें

  1. express.static
  2. express
  3. connect
  4. http
  5. net

सभी उदाहरण GitHub पर भी हैं: https://github.com/rsp/node-static-http.sersers

परीक्षा परिणाम ट्रैविस पर उपलब्ध हैं: https://travis-ci.org/rsp/node-static-http-servers

परिचय

5 वर्षों के बाद से यह सवाल पूछा गया था कि सामान्यजन द्वारा केवल एक सही उत्तर है, लेकिन भले ही उस उत्तर में कोड के साथ कोई समस्या नहीं है, लेकिन रिसेप्शन के साथ कुछ समस्याएं हैं । यह टिप्पणी की गई थी कि " यह बहुत कुछ समझाता नहीं है कि किसी और को कैसे काम पर भरोसा करना है" और इस तथ्य को कितने लोगों ने वोट दिया है यह स्पष्ट रूप से दिखाता है कि बहुत सारी चीजों को स्पष्टीकरण की आवश्यकता है।

सबसे पहले, "Node.js का उपयोग करके छवियों की सेवा कैसे करें" का एक अच्छा जवाब खरोंच से एक स्थिर फ़ाइल सर्वर को लागू नहीं कर रहा है और बुरी तरह से कर रहा है। एक अच्छा जवाब एक्सप्रेस जैसे एक मॉड्यूल का उपयोग कर रहा है जो काम को सही ढंग से करता है

उन टिप्पणियों का उत्तर देना जो कहती हैं कि एक्सप्रेस " का उपयोग करने के अलावा किसी और पर निर्भर नहीं करता है कि कैसे काम पाने के लिए किसी और पर भरोसा किया जाए" यह ध्यान दिया जाना चाहिए, कि httpमॉड्यूल का उपयोग पहले से ही किसी और पर निर्भर करता है ताकि काम पूरा हो सके। यदि कोई काम पूरा करने के लिए किसी पर भरोसा नहीं करना चाहता है, तो उसके बजाय कम से कम कच्चे टीसीपी सॉकेट का उपयोग किया जाना चाहिए - जो मैं नीचे दिए गए अपने उदाहरणों में करता हूं।

एक अधिक गंभीर समस्या यह है कि httpमॉड्यूल का उपयोग करने वाले सभी उत्तर यहां टूट गए हैं । वे परिचय देते हैं दौड़ की स्थिति का हैं , असुरक्षित पथ संकल्प जो पथ पर चलने वाले जोखिम का कारण बनेगा , I / O को अवरुद्ध करता है जो पूरी तरह से सभी और अन्य सूक्ष्म समस्याओं पर किसी भी समवर्ती अनुरोधों की सेवा करने में विफल हो जाएगा - वे पूरी तरह से टूट जाते हैं उदाहरण के रूप में प्रश्न के बारे में क्या पूछता है, और अभी तक वे पहले से ही अमूर्त का उपयोग करते हैं जो द्वारा प्रदान किया गया हैhttp टीसीपी सॉकेट्स का उपयोग करने के बजाय मॉड्यूल ताकि वे खरोंच से सब कुछ भी न करें जैसा कि वे दावा करते हैं।

यदि यह सवाल था कि "स्थैतिक फ़ाइल सर्वर को खरोंच से कैसे लागू किया जाए, एक सीखने के अभ्यास के रूप में" तो हर तरह से जवाब दिया जाता है कि कैसे पोस्ट किया जाना चाहिए - लेकिन फिर भी हमें उनसे कम से कम सही होने की उम्मीद करनी चाहिए । इसके अलावा, यह मान लेना अनुचित नहीं है कि कोई व्यक्ति जो छवि की सेवा करना चाहता है वह भविष्य में अधिक छवियों की सेवा करना चाहता है, इसलिए कोई यह तर्क दे सकता है कि एक विशिष्ट कस्टम स्टैटिक फ़ाइल सर्वर लिखना जो हार्ड-कोडित पथ के साथ केवल एक ही फ़ाइल की सेवा कर सकता है। कुछ कम है। यह कल्पना करना कठिन लगता है कि जो कोई भी एक छवि की सेवा करने के बारे में एक उत्तर की खोज करता है, वह एक समाधान के साथ संतुष्ट होगा जो किसी भी छवि की सेवा करने के लिए सामान्य समाधान के बजाय सिर्फ एक छवि प्रदान करता है।

संक्षेप में, सवाल यह है कि एक छवि की सेवा कैसे की जाती है और इसका उत्तर एक उचित मॉड्यूल का उपयोग करना है जो कि सुरक्षित, बेहतर और विश्वसनीय तरीके से है जो पेशेवर नोड के सर्वोत्तम अभ्यास का उपयोग करते समय पठनीय, बनाए रखने योग्य और भविष्य के प्रमाण के रूप में है। विकास। लेकिन मैं मानता हूं कि इस तरह के जवाब के लिए एक महान जोड़ एक ही कार्यक्षमता को मैन्युअल रूप से लागू करने का एक रास्ता दिखा रहा होगा लेकिन दुख की बात है कि ऐसा करने का हर प्रयास अब तक विफल रहा है। और इसीलिए मैंने कुछ नए उदाहरण लिखे।

इस छोटे से परिचय के बाद, यहाँ मेरे पाँच उदाहरण हैं जो अमूर्तता के 5 विभिन्न स्तरों पर काम कर रहे हैं।

न्यूनतम कार्यक्षमता

हर उदाहरण publicनिर्देशिका से फाइल पेश करता है और इसकी न्यूनतम कार्यक्षमता का समर्थन करता है:

  • अधिकांश सामान्य फ़ाइलों के लिए MIME प्रकार
  • HTML, JS, CSS, सादा पाठ और चित्र प्रदान करता है
  • index.htmlएक डिफ़ॉल्ट निर्देशिका सूचकांक के रूप में कार्य करता है
  • लापता फ़ाइलों के लिए त्रुटि कोड के साथ प्रतिक्रिया करता है
  • कोई रास्ता नहीं है
  • फ़ाइलों को पढ़ते समय कोई दौड़ की स्थिति नहीं

मैंने नोड संस्करण 4, 5, 6 और 7 पर हर संस्करण का परीक्षण किया।

express.static

यह संस्करण मॉड्यूल के express.staticबिल्ट-इन मिडलवेयर का उपयोग करता है express

इस उदाहरण में सबसे अधिक कार्यक्षमता और कम से कम कोड है।

var path = require('path');
var express = require('express');
var app = express();

var dir = path.join(__dirname, 'public');

app.use(express.static(dir));

app.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

express

यह संस्करण expressमॉड्यूल का उपयोग करता है लेकिन express.staticमिडिलवेयर के बिना । स्टैटिक का उपयोग करते हुए स्टैटिक फाइल्स की सर्विसिंग को सिंगल रूट हैंडलर के रूप में लागू किया जाता है।

इस उदाहरण में सरल पथ ट्रैवर्सल काउंटरमेशर्स हैं और अधिकांश सामान्य MIME प्रकारों के सीमित सेट का समर्थन करते हैं।

var path = require('path');
var express = require('express');
var app = express();
var fs = require('fs');

var dir = path.join(__dirname, 'public');

var mime = {
    html: 'text/html',
    txt: 'text/plain',
    css: 'text/css',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    js: 'application/javascript'
};

app.get('*', function (req, res) {
    var file = path.join(dir, req.path.replace(/\/$/, '/index.html'));
    if (file.indexOf(dir + path.sep) !== 0) {
        return res.status(403).end('Forbidden');
    }
    var type = mime[path.extname(file).slice(1)] || 'text/plain';
    var s = fs.createReadStream(file);
    s.on('open', function () {
        res.set('Content-Type', type);
        s.pipe(res);
    });
    s.on('error', function () {
        res.set('Content-Type', 'text/plain');
        res.status(404).end('Not found');
    });
});

app.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

connect

यह संस्करण उस connectमॉड्यूल का उपयोग करता है जो एब्सट्रैक्शन के एक स्तर से कम है express

इस उदाहरण में expressसंस्करण के समान कार्यक्षमता है लेकिन थोड़ा कम-लीवर एपीआई का उपयोग करना।

var path = require('path');
var connect = require('connect');
var app = connect();
var fs = require('fs');

var dir = path.join(__dirname, 'public');

var mime = {
    html: 'text/html',
    txt: 'text/plain',
    css: 'text/css',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    js: 'application/javascript'
};

app.use(function (req, res) {
    var reqpath = req.url.toString().split('?')[0];
    if (req.method !== 'GET') {
        res.statusCode = 501;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Method not implemented');
    }
    var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
    if (file.indexOf(dir + path.sep) !== 0) {
        res.statusCode = 403;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Forbidden');
    }
    var type = mime[path.extname(file).slice(1)] || 'text/plain';
    var s = fs.createReadStream(file);
    s.on('open', function () {
        res.setHeader('Content-Type', type);
        s.pipe(res);
    });
    s.on('error', function () {
        res.setHeader('Content-Type', 'text/plain');
        res.statusCode = 404;
        res.end('Not found');
    });
});

app.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

http

यह संस्करण उस httpमॉड्यूल का उपयोग करता है जो एनओटीटी में HTTP के लिए निम्नतम-स्तरीय एपीआई है।

इस उदाहरण में connectसंस्करण के समान कार्यक्षमता है लेकिन और भी निचले स्तर के एपीआई का उपयोग करना।

var path = require('path');
var http = require('http');
var fs = require('fs');

var dir = path.join(__dirname, 'public');

var mime = {
    html: 'text/html',
    txt: 'text/plain',
    css: 'text/css',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    js: 'application/javascript'
};

var server = http.createServer(function (req, res) {
    var reqpath = req.url.toString().split('?')[0];
    if (req.method !== 'GET') {
        res.statusCode = 501;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Method not implemented');
    }
    var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
    if (file.indexOf(dir + path.sep) !== 0) {
        res.statusCode = 403;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Forbidden');
    }
    var type = mime[path.extname(file).slice(1)] || 'text/plain';
    var s = fs.createReadStream(file);
    s.on('open', function () {
        res.setHeader('Content-Type', type);
        s.pipe(res);
    });
    s.on('error', function () {
        res.setHeader('Content-Type', 'text/plain');
        res.statusCode = 404;
        res.end('Not found');
    });
});

server.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

net

यह संस्करण netमॉड्यूल का उपयोग करता है जो कि नोड में टीसीपी सॉकेट्स के लिए निम्नतम-स्तरीय एपीआई है।

इस उदाहरण में httpसंस्करण की कुछ कार्यक्षमता है लेकिन न्यूनतम और अपूर्ण HTTP प्रोटोकॉल को खरोंच से लागू किया गया है। चूँकि यह chunked एन्कोडिंग का समर्थन नहीं करता है इसलिए यह फ़ाइलों को स्मृति में भेजने से पहले उन्हें एक प्रतिक्रिया भेजने से पहले आकार जानने के लिए लोड करता है क्योंकि फ़ाइलों को स्टेट करना और फिर लोड करना एक दौड़ की स्थिति का परिचय देगा।

var path = require('path');
var net = require('net');
var fs = require('fs');

var dir = path.join(__dirname, 'public');

var mime = {
    html: 'text/html',
    txt: 'text/plain',
    css: 'text/css',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    js: 'application/javascript'
};

var server = net.createServer(function (con) {
    var input = '';
    con.on('data', function (data) {
        input += data;
        if (input.match(/\n\r?\n\r?/)) {
            var line = input.split(/\n/)[0].split(' ');
            var method = line[0], url = line[1], pro = line[2];
            var reqpath = url.toString().split('?')[0];
            if (method !== 'GET') {
                var body = 'Method not implemented';
                con.write('HTTP/1.1 501 Not Implemented\n');
                con.write('Content-Type: text/plain\n');
                con.write('Content-Length: '+body.length+'\n\n');
                con.write(body);
                con.destroy();
                return;
            }
            var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
            if (file.indexOf(dir + path.sep) !== 0) {
                var body = 'Forbidden';
                con.write('HTTP/1.1 403 Forbidden\n');
                con.write('Content-Type: text/plain\n');
                con.write('Content-Length: '+body.length+'\n\n');
                con.write(body);
                con.destroy();
                return;
            }
            var type = mime[path.extname(file).slice(1)] || 'text/plain';
            var s = fs.readFile(file, function (err, data) {
                if (err) {
                    var body = 'Not Found';
                    con.write('HTTP/1.1 404 Not Found\n');
                    con.write('Content-Type: text/plain\n');
                    con.write('Content-Length: '+body.length+'\n\n');
                    con.write(body);
                    con.destroy();
                } else {
                    con.write('HTTP/1.1 200 OK\n');
                    con.write('Content-Type: '+type+'\n');
                    con.write('Content-Length: '+data.byteLength+'\n\n');
                    con.write(data);
                    con.destroy();
                }
            });
        }
    });
});

server.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

उदाहरण डाउनलोड करें

मैंने अधिक स्पष्टीकरण के साथ GitHub पर सभी उदाहरण पोस्ट किए।

उदाहरण के साथ express.static, express, connect, httpऔर net:

केवल उपयोग करने वाली अन्य परियोजना express.static:

टेस्ट

ट्रैविस पर परीक्षण के परिणाम उपलब्ध हैं:

सब कुछ नोड संस्करण 4, 5, 6 और 7 पर परीक्षण किया गया है।

यह सभी देखें

अन्य संबंधित उत्तर:


8
प्रश्न का सर्वश्रेष्ठ और पूर्ण उत्तर। बहुत बुरा, मैं तुम्हें केवल एक बार उखाड़ सकता हूं।
कुलवार

3
इस तरह के पुराने प्रश्नों को फिर से सुधारने का एक तरीका होना चाहिए! मैंने सिर्फ एक घंटे बर्बाद किया या काम करने के लिए 110 वोट प्रतिक्रिया प्राप्त करने की कोशिश कर रहा हूं। अंत में मैंने केवल जांच करने के लिए नीचे स्क्रॉल किया। आपका उत्तर इस विषय पर एक पाठ्यपुस्तक होना चाहिए।
थाईलैंड

2
सर्वश्रेष्ठ उत्तर और पूर्ण विवरण में। स्वीकृत उत्तर को चिह्नित किया जाना चाहिए। धन्यवाद दोस्त !!!
प्रबोध एम

मुझे नहीं पता कि कोई एक्सप्रेस का इस्तेमाल क्यों करेगा। मैंने भी शुरू में शायद इसलिए किया क्योंकि बाकी सब करते थे। तब मुझे महसूस हुआ कि नोड के http मॉड्यूल का उपयोग करना सही तरीका है। यह वह है जो इसके लिए प्रदान किया जाता है। आपको बहुत लचीलापन मिलता है। आप HTTP प्रोटोकॉल को समझते हैं और आप आसानी से डीबग कर सकते हैं। एक्सप्रेस बहुत सारे शब्दजाल और http मॉड्यूल पर एक पतली परत प्रदान करता है जो कि http मॉड्यूल के साथ कच्चे कोडिंग के साथ लागू करना आसान है। मैं एक्सप्रेस या ऐसे किसी भी मॉड्यूल के किसी भी उपयोगकर्ता को दृढ़ता से उनसे दूर जाने और सीधे http मॉड्यूल का उपयोग करने की सलाह देता हूं।
सनी

1
एक नोट जो मैं अपने जैसे newbies के लिए उल्लेख करना चाहूंगा: जब हम एक फ़ोल्डर को स्टेटिक घोषित करते हैं express.staticतो हम url पर कॉल करके इमेज को ला सकते हैं http://ip:port/path_after_the_static_folder, हमें इमेज की सेवा करने के लिए खुद को स्टेटिक फ़ोल्डर का उल्लेख करने की आवश्यकता नहीं है। हालाँकि, हम जोड़ सकते हैं कि app.use('/static', express.static(imagePath))सुविधा के लिए par प्रलेखन के रूप में उपयोग करके : expressjs.com/en/starter/static-files.html
रकीबुल हक

160

मैं अन्य पोस्टरों से सहमत हूं कि आखिरकार, आपको एक रूपरेखा का उपयोग करना चाहिए, जैसे कि एक्सप्रेस .. लेकिन पहले आपको यह भी समझना चाहिए कि पुस्तकालय के बिना इस तरह से कुछ मौलिक कैसे करें, वास्तव में यह समझने के लिए कि पुस्तकालय आपके लिए क्या सार है ..। कदम हैं

  1. आने वाले HTTP अनुरोध को पार्स करें, यह देखने के लिए कि उपयोगकर्ता किस मार्ग के लिए पूछ रहा है
  2. प्रतिक्रिया देने के लिए सर्वर के लिए सशर्त विवरण में एक मार्ग जोड़ें
  3. यदि छवि का अनुरोध किया गया है, तो डिस्क से छवि फ़ाइल पढ़ें।
  4. एक हेडर में छवि सामग्री-प्रकार की सेवा करें
  5. शरीर में छवि सामग्री परोसें

कोड कुछ इस तरह दिखाई देगा (परीक्षण नहीं)

fs = require('fs');
http = require('http');
url = require('url');


http.createServer(function(req, res){
  var request = url.parse(req.url, true);
  var action = request.pathname;

  if (action == '/logo.gif') {
     var img = fs.readFileSync('./logo.gif');
     res.writeHead(200, {'Content-Type': 'image/gif' });
     res.end(img, 'binary');
  } else { 
     res.writeHead(200, {'Content-Type': 'text/plain' });
     res.end('Hello World \n');
  }
}).listen(8080, '127.0.0.1');

27
आपको प्रतिक्रिया के बीच में readFileSync का उपयोग नहीं करना चाहिए। या तो पहली टिक पर एक सिंक लोड का उपयोग किया जाना चाहिए या एस्किंक विधि का उपयोग किया जाना चाहिए। codr.cc/s/5d0b73d6/js
सामान्यजन

1
मैं आपके साथ सिंक संस्करण पर बोर्ड पर हूं, हालांकि, async संस्करण के लिए, मुझे लगा कि फ़ाइलों के लिए गैर-अवरुद्ध संचालन का उपयोग करने का खतरा है, यह था कि यह पूरी फ़ाइल पढ़ने से पहले प्रतिक्रिया भेज सकता था, और अंत में आपको छोड़ देगा उपयोगकर्ता को एक आंशिक फ़ाइल प्रदान की जा रही है? यदि आप एक async फ़ाइल पढ़ने का उपयोग करते हैं तो क्या आपको chunked एन्कोडिंग का उपयोग करने की आवश्यकता है?
3

1
fs.readFileSync तब तक कॉलबैक नहीं करता है जब तक कि पूरी फ़ाइल लोड न हो जाए, इसलिए चंक से निपटने की कोई आवश्यकता नहीं है। चंक हैंडलिंग ज्यादातर नेटवर्क फ़ाइल स्थानांतरण के लिए है (क्योंकि चीजें उम्मीद से अधिक समय ले सकती हैं)।
सामान्यजन

9
लाइन res.end(img);होनी चाहिए res.end(img, 'binary');। अच्छा कार्य!
होन्जा पोकॉर्नी

3
+1 के लिए "लेकिन पहले आपको यह भी समझना चाहिए कि पुस्तकालय के बिना इस तरह से कुछ मौलिक कैसे करना है, वास्तव में यह समझने के लिए कि पुस्तकालय आपके लिए क्या सार है .."
सनी

67

आपको एक्सप्रेस फ्रेमवर्क का उपयोग करना चाहिए ।

npm install express

और फिर

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

और फिर URL लोकलहोस्ट: 8080 / इमेज / लोगो.जीआईएफ काम करना चाहिए।


18
सुरक्षित है, लेकिन काम करने के लिए किसी और पर भरोसा करने के अलावा और कोई व्याख्या नहीं करता है।
लीजी

मैंने एक वेनिला नोड (बस मूल मॉड्यूल) संस्करण जोड़ा।
20

+ I यह अब तक का एकमात्र सही उत्तर है। मैं इसे और अधिक विवरण में अपने उत्तर में समझाता हूं
22

15

बहुत देर हो चुकी है लेकिन किसी की मदद करता है, मैं उपयोग कर रहा हूं node version v7.9.0औरexpress version 4.15.0

यदि आपकी निर्देशिका संरचना कुछ इस प्रकार है:

your-project
   uploads
   package.json
   server.js

server.js कोड:

var express         = require('express');
var app             = express();
app.use(express.static(__dirname + '/uploads'));// you can access image 
 //using this url: http://localhost:7000/abc.jpg
//make sure `abc.jpg` is present in `uploads` dir.

//Or you can change the directory for hiding real directory name:

`app.use('/images', express.static(__dirname+'/uploads/'));// you can access image using this url: http://localhost:7000/images/abc.jpg


app.listen(7000);

14

अनुरोध के रूप में वेनिला नोड संस्करण:

var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');

http.createServer(function(req, res) {
  // parse url
  var request = url.parse(req.url, true);
  var action = request.pathname;
  // disallow non get requests
  if (req.method !== 'GET') {
    res.writeHead(405, {'Content-Type': 'text/plain' });
    res.end('405 Method Not Allowed');
    return;
  }
  // routes
  if (action === '/') {
    res.writeHead(200, {'Content-Type': 'text/plain' });
    res.end('Hello World \n');
    return;
  }
  // static (note not safe, use a module for anything serious)
  var filePath = path.join(__dirname, action).split('%20').join(' ');
  fs.exists(filePath, function (exists) {
    if (!exists) {
       // 404 missing files
       res.writeHead(404, {'Content-Type': 'text/plain' });
       res.end('404 Not Found');
       return;
    }
    // set the content type
    var ext = path.extname(action);
    var contentType = 'text/plain';
    if (ext === '.gif') {
       contentType = 'image/gif'
    }
    res.writeHead(200, {'Content-Type': contentType });
    // stream the file
    fs.createReadStream(filePath, 'utf-8').pipe(res);
  });
}).listen(8080, '127.0.0.1');

2
आप fs.exists(दौड़ की स्थिति) की जांच नहीं करना चाहते हैं , पाइपिंग करते समय एक त्रुटि पकड़ने के लिए यह एक बेहतर आदत होगी।
ब्रेंडन

हालाँकि इस मामले में जाँच नोड का तरीका नहीं है, फिर भी इस उत्तर के बारे में बाकी सब कुछ स्वीकृत उत्तर की तुलना में 1 मिलियन गुना बेहतर है।
निंजाक्सोर

1
मैं @BrendanAshworth से सहमत हूं। यहां लगभग सभी उत्तरों में दौड़ की स्थिति मौजूद है। मैंने अपने उत्तर में इसके बारे में अधिक लिखा । लेकिन कुदोस इसे धाराओं के साथ लिखने के लिए। लगभग सभी अन्य उत्तर readFileSync का उपयोग करते हैं जो अवरुद्ध है और किसी भी घटना संचालकों में इसका उपयोग नहीं किया जाना चाहिए।
आरएसपी

1
var filePath = path.resolve ('सार्वजनिक', '।' + parts.pathname); response.writeHead (200, {'सामग्री-प्रकार': mime.lookup (parts.pathname)}); mime - npm से पैकेज माइम-प्रकार
रिजन

14

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res) {
  res.writeHead(200,{'content-type':'image/jpg'});
  fs.createReadStream('./image/demo.jpg').pipe(res);
}).listen(3000);
console.log('server running at 3000');

सरल और बात करने के लिए, एक्सप्रेस जवाब से बेहतर तरीका है .. यह 1000 upvotes का हकदार है। बस एक टिप: शायद कोड स्निपेट को हटा दें और इसे सिर्फ जावास्क्रिप्ट पाठ के साथ बदल दें
ब्लूजैके

क्या ऐसा पैरामीटर पारित करना संभव होगा ताकि './image/:jpg किसी भी चित्र की सेवा कर सके?
Prav

13

मैं बाकी सेवाओं के लिए पुनर्स्थापना का उपयोग करना पसंद करता हूं । मेरे मामले में, मैंने छवियों की सेवा के लिए एक REST सेवा बनाई थी और फिर यदि कोई छवि स्रोत 404/403 पर लौटा, तो मैं एक वैकल्पिक छवि वापस करना चाहता था। यहाँ मैं कुछ सामान के संयोजन के साथ आया हूँ:

function processRequest(req, res, next, url) {
    var httpOptions = {
        hostname: host,
        path: url,
        port: port,
        method: 'GET'
    };

    var reqGet = http.request(httpOptions, function (response) {
        var statusCode = response.statusCode;

        // Many images come back as 404/403 so check explicitly
        if (statusCode === 404 || statusCode === 403) {
            // Send default image if error
            var file = 'img/user.png';
            fs.stat(file, function (err, stat) {
                var img = fs.readFileSync(file);
                res.contentType = 'image/png';
                res.contentLength = stat.size;
                res.end(img, 'binary');
            });

        } else {
            var idx = 0;
            var len = parseInt(response.header("Content-Length"));
            var body = new Buffer(len);

            response.setEncoding('binary');

            response.on('data', function (chunk) {
                body.write(chunk, idx, "binary");
                idx += chunk.length;
            });

            response.on('end', function () {
                res.contentType = 'image/jpg';
                res.send(body);
            });

        }
    });

    reqGet.on('error', function (e) {
        // Send default image if error
        var file = 'img/user.png';
        fs.stat(file, function (err, stat) {
            var img = fs.readFileSync(file);
            res.contentType = 'image/png';
            res.contentLength = stat.size;
            res.end(img, 'binary');
        });
    });

    reqGet.end();

    return next();
}

आपको ईवेंट हैंडलर के अंदर readFileSync का उपयोग कभी नहीं करना चाहिए । यह एक तुल्यकालिक ऑपरेशन है जो फ़ाइल को पढ़ते समय आपकी पूरी प्रक्रिया को अवरुद्ध करता है। मैंने इसे अपने उत्तर में अधिक विस्तार से समझाया ।
rsp

5

यह थोड़ा ऑफ-टॉपिक हो सकता है, क्योंकि आप Node.js के माध्यम से सेवारत स्टैटिक फाइल के बारे में पूछ रहे हैं (विशेष रूप से ( fs.createReadStream('./image/demo.jpg').pipe(res)वास्तव में एक अच्छा विचार है), लेकिन उत्पादन में आप अपने नोड ऐप हैंडल कार्यों को करना चाह सकते हैं, जिससे अन्यथा सामना नहीं किया जा सकता है। , और ऑफ-लोड स्थिर नगीन जैसे उदात्त सेवारत।

इसका मतलब है कि आपके ऐप के अंदर कम कोडिंग, और बेहतर दक्षता क्योंकि रिवर्स प्रोक्सीज़ इसके लिए आदर्श हैं।


3

मुझे केवल ऊपर दिए गए उत्तरों को जोड़ना है, जो छवियों का अनुकूलन करते हैं, और उत्तरदायी छवियों की सेवा पेज को नाटकीय रूप से लोड करने में मदद करते हैं, क्योंकि> 90% वेब ट्रैफ़िक छवियां हैं। आप जेएस / नोड मॉड्यूल जैसे कि इमेजिन और संबंधित प्लग-इन का उपयोग करके छवियों को प्री-प्रोसेस करना चाहते हैं , आदर्श रूप से निर्माण प्रक्रिया के दौरान ग्रंट या गुलप के साथ

छवियों का अनुकूलन का अर्थ है एक आदर्श छवि प्रकार की खोज करना, और छवि गुणवत्ता और फ़ाइल आकार के बीच संतुलन हासिल करने के लिए इष्टतम संपीड़न का चयन करना।

उत्तरदायी छवियों की सेवा स्वचालित रूप से और उपयोग करके प्रत्येक छवि के कई आकारों और स्वरूपों को बनाने में अनुवाद करती हैsrcset आपके html में करने से आपको प्रत्येक एकल ब्राउज़र के लिए इष्टतम छवि सेट (यानी, आदर्श प्रारूप और आयाम, इस प्रकार इष्टतम फ़ाइल आकार) की सेवा करने की अनुमति मिलती है।

बिल्ड प्रोसेस के दौरान इमेज प्रोसेसिंग ऑटोमेशन का मतलब है कि इसे एक बार शामिल करना, और कम से कम अतिरिक्त समय की आवश्यकता के लिए अनुकूलित छवियों को आगे प्रस्तुत करना।

कुछ महान पर पढ़ा उत्तरदायी छवियों , minification सामान्य, में imagemin नोड मॉड्यूल और srcset का उपयोग कर


1

यह विधि मेरे लिए काम करती है, यह गतिशील नहीं है लेकिन सीधे बिंदु पर है:

const fs      = require('fs');
const express = require('express');
const app     = express();

app.get( '/logo.gif', function( req, res ) {

  fs.readFile( 'logo.gif', function( err, data ) {

    if ( err ) {

      console.log( err );
      return;
    }

    res.write( data );
    return res.end();
  });

});

app.listen( 80 );

0

//This method involves directly integrating HTML Code in the res.write
//first time posting to stack ...pls be kind

const express = require('express');
const app = express();
const https = require('https');

app.get("/",function(res,res){
    res.write("<img src="+image url / src +">");
    res.send();
});

app.listen(3000, function(req, res) {
  console.log("the server is onnnn");
});

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.