React dropzone, nasıl resim yüklenir?

Question

React dropzone özelliğini kullanarak, onDrop geri bildirimini kullanarak görüntüye başarıyla eriştim. Ancak, görüntüyü sunucuma göndererek, bir S3 paketine kaydederek ve imzalı bir URL'yi istemciye geri göndererek Amazon S3'e yüklemeye çalışıyorum.

Şimdiye kadar sahip olduğum bilgilerle bunu yapamıyorum ve dokümanlar bunu bilgimle paylaşmıyor gibi görünmüyor.

onDrop

dosyalarla benim redux eylemlerde bir işlev çağrısını tetikler:

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 
     } 
    } 
    } 
} 

Ancak, benim sunucuya aldığımda, bunu sadece dan başvuruda bulunulur (bu damla görüntüyü kaydetmek nasıl emin değilim tarayıcı.)

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 çok parçalı bir istek ile bir sunucuya gönderilebilir File nesnelerinin bir dizi döner React. Kullandığınız kitaplığa bağlı olarak farklı şekilde yapılabilir. aşağıdaki gibi

Fetch API kullanma görünüyor:

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

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

gibi bir şey yapacağını Superagent kullanma:

Eğer blob'un bayt yerine Blob URL'sini yükleyerek anlaşılıyor

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