Reject dropzone、画像のアップロード方法は？

Question

React dropzoneを使用して、onDropコールバックを使用して画像に正常にアクセスしました。しかし、イメージをサーバーに送信し、S3バケットに保存し、署名されたURLをイメージに戻してAmazon S3にアップロードしようとしています。

これまで私がこれまでに持っていた情報ではこれを行うことができず、私の知る限りではこれを言及していないようです。

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

は、ドロップゾーンは、マルチパート要求とともにサーバに送信することができるFileオブジェクトの配列を返す反応します。使用しているライブラリに依存して、別の方法で行うこともできます。次のように

はFetch APIを使用してそれが見えます：

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

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

はあなたのような何かをするだろうSuperagentを使用する：

あなたはブロブのバイトではなく、ブロブのURLをアップロードしているように見えます

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