प्रतिक्रिया ड्रॉपज़ोन, छवि अपलोड करने के लिए कैसे?

Question

प्रतिक्रिया ड्रॉपज़ोन का उपयोग करके, मैंने onDrop कॉलबैक का उपयोग कर छवि को सफलतापूर्वक एक्सेस कर लिया है। हालांकि, मैं अपने सर्वर पर छवि भेजकर, एस 3 बाल्टी में सहेजकर और क्लाइंट को छवि पर हस्ताक्षरित यूआरएल लौटकर अमेज़ॅन एस 3 पर अपलोड करने की कोशिश कर रहा हूं।

मैं अब तक की जानकारी के साथ ऐसा नहीं कर सकता और दस्तावेज़ मेरे ज्ञान के लिए इसका उल्लेख नहीं करते हैं।

onDrop फाइलों के साथ मेरी redux कार्यों में एक समारोह कॉल से चलाता है:

export function saveImageToS3 (files, user) { 
    file = files[0] 
    // file.name -> filename.png 
    // file -> the entire file object 
    // filepreview -> blob:http:localhost:3000/1ds3-sdfw2-23as2 

    return { 
    [CALL_API] : { 
     method:'post', 
     path: '/api/image', 
     successType: A.SAVE_IMAGE, 
     body: { 
     name: file.name, 
     file: file, 
     preview: file.preview, 
     username: user 
     } 
    } 
    } 
} 

हालांकि, जब मैं अपने सर्वर से मिलता है, मुझे यकीन है कि इस ब्लॉब छवि को बचाने के लिए (है कि केवल से संदर्भित है नहीं कर रहा हूँ ब्राउज़र।)

server.post('/api/image', (req, res) => { 
    // req.body.preview --> blob:http://localhost:3000/1ds3-sdfw2-23as2 
    // req.body.file -> {preview:blob:http://localhost:3000/1ds3-sdfw2-23as2}, no other properties for some reason 
}) 

Answer 1

प्रतिक्रिया Dropzone File वस्तुओं जो एक बहु हिस्सा अनुरोध के साथ एक सर्वर के लिए भेजा जा सकता है की एक सरणी देता है। आपके द्वारा उपयोग की जाने वाली लाइब्रेरी पर निर्भर करता है कि इसे अलग-अलग किया जा सकता है।

Fetch API का उपयोग करते हुए यह इस प्रकार है:

var formData = new FormData(); 
formData.append('file', files[0]); 

fetch('http://server.com/api/upload', { 
    method: 'POST', 
    body: formData 
}) 

Superagent का उपयोग करके आप की तरह कुछ करना होगा:

var req = request.post('/api/upload'); 
req.attach(file.name, files[0]); 
req.end(callback);