Vùng phản hồi thả xuống, cách tải lên hình ảnh?

Question

Sử dụng vùng thả phản hồi, tôi đã truy cập thành công hình ảnh bằng cách sử dụng gọi lại onDrop. Tuy nhiên, tôi đang cố gắng tải lên Amazon S3 bằng cách gửi hình ảnh đến máy chủ của tôi, lưu vào thùng S3 và trả lại url đã ký cho hình ảnh về máy khách.

Tôi không thể làm điều này với thông tin tôi có cho đến nay và các tài liệu dường như không đề cập đến điều này với kiến ​​thức của tôi.

onDrop gây nên một cuộc gọi chức năng trong hành động Redux của tôi với các tập tin:

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

Tuy nhiên, khi tôi nhận được đến máy chủ của tôi, tôi không chắc chắn làm thế nào để lưu hình ảnh blob này (đó là chỉ tham chiếu từ trình duyệt.)

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

Phản ứng dropZone trả về một mảng các đối tượng File có thể được gửi đến một máy chủ với một yêu cầu đa phần. Phụ thuộc vào thư viện bạn sử dụng nó có thể được thực hiện khác nhau.

Sử dụng Fetch API nó trông giống như sau:

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

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

Sử dụng Superagent bạn sẽ làm điều gì đó như:

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