반응 dropzone, 이미지를 업로드하는 방법?

React dropzone을 사용하여 onDrop 콜백을 사용하여 이미지에 성공적으로 액세스했습니다. 그러나 이미지를 내 서버로 보내고 S3 버킷에 저장하고 서명 된 URL을 이미지에 다시 클라이언트로 반환하여 Amazon S3에 업로드하려고합니다.반응 dropzone, 이미지를 업로드하는 방법?

내가 지금까지 가지고있는 정보로는이 작업을 수행 할 수 없으며 문서는 내 지식을 언급하지 않는 것 같습니다.

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

을 그러나, 나는 내 서버에 도착하면, 나는 그에만에서 참조 것 (이 Blob 이미지를 저장하는 방법을 잘 모르겠어요 브라우저.)

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

출처

2016-12-07 Kim Lee

. 바이트를 얻으려면 FileReader/ArrayBuffer를 사용하여 blob을 읽어야합니다. 많은 코드가 필요합니다. 하지만 조금만 검색했을 때 도움이 될 수도 있습니다. https://www.npmjs.com/package/react-dropzone-s3-uploader –

다른 사람들을 위해서 - 나는 또한 멀테 서버 측을 사용해야했습니다. 그것은 멀티 파트 폼 데이터를 등록하지 않았기 때문에. 나는 새로운 FormData와 함께 아래의 제안을 사용하여 객체를 생성 한 다음 노드에서 multer를 app.post ('/ api/image', upload.single ('file'), function() {...})로 사용했습니다. 그것을 돌봐. –

DROPZONE는 멀티 파트 요청을 서버로 전송 될 수 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);

출처

2016-12-07 19:15:23

업로드 진행 상황을 어떻게 보여줄 수 있습니까? –

반응 dropzone, 이미지를 업로드하는 방법?

답변

관련 문제