2013-02-14 16 views
6

मैं नोडजेज़ सीखने की कोशिश कर रहा हूं और मैंने सोचा कि ऐसा करने का सबसे अच्छा तरीका एक्सप्रेस या किसी अन्य गैर-कोर मॉड्यूल के बिना कुछ सामान करने का प्रयास करना होगा। मैं कुछ पाठ और एक छवि को एक साथ वितरित करने की कोशिश करने पर अटक गया हूं। कोड मैं कोशिश कर रहा हूँ है:नोडज: एक ही प्रतिक्रिया (पाठ और छवि) के साथ विभिन्न सामग्री प्रकार कैसे लौटाते हैं?

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

var server = http.createServer(function(request,response) { 

    fs.readFile('my_pic.jpg', function(error, file) { 
     response.writeHead(200, {'content-type':'text/html'}); 
     response.write('<p>hi there!</p>'); 

     response.writeHead(200, {'content-type':'image/jpg'}); 
     response.write(file, 'image'); 

     response.end(); 
    }); 

}); 

var port = process.env.PORT || 8080; 

server.listen(port, function() { 
    console.log('Listening on port ' + port); 
}); 

तो आदर्श क्या मिल जाने चाहिए है:

<html> 
<body> 
<p>hi there</p> 
<img src='my_pic.jpg'/> 
</body> 
</html> 

लेकिन बजाय, कुछ भी नहीं दिखाई दे रहा है।

मैंने 'हाय वहाँ' लिखने के बाद प्रतिक्रिया.एंड() लिखने की कोशिश की, जो पाठ प्रदर्शित करता है, और इसके बाद मैंने पाठ और चित्र (हेडर शामिल) के स्थानों को स्वैप करने का प्रयास किया, जिसने तस्वीर प्रदर्शित की, लेकिन मैं वास्तविक वेब पेज की तरह, दोनों को एकसाथ प्रदर्शित करने के तरीके को समझने में नहीं पता लगाया जा सकता है।

क्या आप समझा सकते हैं कि एक ही वेबपृष्ठ पर विभिन्न प्रकार की सामग्री डालने के बारे में कैसे जाना है - क्या उन्हें अलग-अलग प्रतिक्रियाओं में होना चाहिए? कुछ ऐसा जो मुझे एक और सवाल पर भर में आया था:

nodejs - How to read and output jpg image?

ऐसे ही कुछ समाधान की तरह लग रहा है, लेकिन मैं समझ नहीं कैसे मेरी स्थिति को यह लागू करने के लिए (मैं में अनुभव के एक बहुत कुछ नहीं है चीजों के सर्वर साइड)

बहुत धन्यवाद

संपादित करें:। यह user568109 के जवाब से काम मिल गया:

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


var server = http.createServer(function(request,response) { 
fs.readFile('my_pic.jpg', function(error, file) { 

    var imagedata = new Buffer(file).toString('base64'); 

    response.writeHead(200, {'content-type':'text/html'}); 
    response.write("hi there!<img src='data:my_pic.jpg;base64,"+imagedata+"'/>"); 
    response.end(); 

    }); 

}); 

var port = process.env.PORT || 8080; 

server.listen(port, function() { 
    console.log('Listening on port' + port); 
}); 

यह छवियों को एम्बेड करने में बहुत सारे काम की तरह लगता है - अगर मैं एक से अधिक छवियां रखना चाहता हूं, तो मुझे केवल उन फाइलस्ट्रीम कॉलबैक को घोंसला रखना होगा?

मैं भी यह इस तरह से कोशिश की, लेकिन यह काम नहीं करता:

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

var server = http.createServer(function(request,response) { 

    response.writeHead(200, {'content-type':'text/html'}); 
    response.write("hi there!<img src='my_pic.jpg'/>"); 
    response.end(); 

}); 

var port = process.env.PORT || 8080; 

server.listen(port, function() { 
    console.log('Listening on port' + port); 
}); 

मैं अगर यह लोग लाइन

response.write('<img src="my_pic.jpg"/>') 

से क्या मतलब था यकीन नहीं था, क्योंकि सर्वर नहीं करता है प्रतीत होता है कि छवि को लाने के लिए मेरी तरफ से एक और अनुरोध नहीं किया जा रहा है? यह सिर्फ एक टूटी हुई आइकन छवि दिखा रहा है।

+1

के लिए केवल एक शीर्षलेख आवश्यक है जैसे कि आप एक प्रतिक्रिया पर 2 HTTP अनुरोधों को क्रैक करने का प्रयास कर रहे हैं। वास्तव में आपको केवल 'response.write (' ') लिखना चाहिए; और फिर ब्राउज़र पहले HTML डाउनलोड करेगा और फिर my_pic.jpg – codefactor

+0

डाउनलोड करने के लिए एक अलग अनुरोध करेगा जैसा कि आप एक मल्टीपार्ट प्रतिक्रिया भेजना चाहते हैं - कितना विषम । मुझे नहीं पता कि कोई ब्राउज़र इसे संभाल सकता है या नहीं। मुझे लगता है कि जवाब क्लाइंट-साइड पार्स किया जाना चाहिए। – MaxArt

+0

संभावित डुप्लिकेट [नोड.जेएस का उपयोग कर बहु-भाग http प्रतिक्रिया का निर्माण] (http://stackoverflow.com/questions/11494209/construct-multi-part-http-response-using-node-js) – maerics

उत्तर

3

यदि आप ऊपर दिए गए अनुसार response.write('<img src="my_pic.jpg"/>'); करते हैं तो छवि फ़ाइल केवल तभी भेजी जाएगी जब ब्राउज़र छवि के लिए GET भेजता है। यह बहु-पक्ष अनुरोध बन जाएगा।

या आप इसे ऐसा कर सकते हैं। एचटीएमएल में बाइनरी फॉर्म में अपनी छवि भेजना संभव है। उपयोग करें:

<img src="data:image/gif;base64,imagedata"> 

जहां इमेगेडाटा gif छवि का आधार 64 एन्कोडिंग है। सही छवि रूपांतरण NodeJS base64 image encoding/decoding not quite working

यह एक प्रतिक्रिया है जो दोनों पाठ और छवि भेजता भेजता के लिए यहाँ

//Write text in response. 
content = get-image-file-contents;  //store image into content 
imagedata = new Buffer(content).toString('base64'); //encode to base64 
response.write('<img src="data:image/gif;base64,'+imagedata+'">');//send image 
response.end(); 

चेक: तो Node.js में करते हैं। प्रतिक्रिया response.writeHead(200, {'content-type':'text/html'});

+0

हाय उपयोगकर्ता 568109, I अपनी दूसरी विधि का उपयोग करके छवि को लोड करने के लिए मिला, और मैंने उस कोड को शामिल करने के लिए अपना प्रश्न संपादित कर लिया है। हालांकि मुझे यकीन नहीं है कि काम करने के लिए अपनी पहली विधि कैसे प्राप्त करें - मैंने अपने संपादित प्रश्न में कोड भी शामिल किया है, क्या यह लाइन प्रतिक्रिया के साथ आपका था .write ('') ;? बहुत धन्यवाद। – xdl

+0

सबसे पहले एक उदाहरण था, यदि आप इसे HTML पृष्ठ में उपयोग करना चाहते हैं। इस तरह मैं HTML पृष्ठ के भीतर छवि को एम्बेड करता हूं। लेटर जावास्क्रिप्ट कोड था जिसे आप नोड में उपयोग कर सकते थे। – user568109

1

आप केवल दिए गए शीर्षलेख पर एक मान लिख सकते हैं, इसलिए दूसरा हेडर पहले ओवरराइट कर रहा है। दो समाधान

  1. बाहर लिखने html में छवि के लिए एक यूआरएल कर रहे हैं - उपयोगकर्ता (एक अतिरिक्त http अनुरोध छवि को लाने के लिए की आवश्यकता होगी,) के लिए थोड़ी धीमी हो जाएगी, लेकिन उपयोग के मामले के आधार पर यह सामान्य रूप से स्वीकार्य है और लागू करने के लिए बहुत आसान
  2. छवि को डेटा-यूरी स्ट्रिंग में कनवर्ट करें और इसे HTML के रूप में छवि के स्रोत के रूप में शामिल करें। पहले दृष्टिकोण की तुलना में लागू करने के लिए अधिक जटिल (मुझे नोड में रूपांतरण करने के लिए किसी भी पुस्तकालय के बारे में पता नहीं है) और नगण्य लाभ के साथ।
संबंधित मुद्दे