redux saga를 사용하여 양식 필드 파일 업로드

Question

본문에 form-data이라는 파일을 업로드합니다. ajax을 사용하면 올바르게 작동하지만 redux-saga에서 같은 작업을 시도하면 작동하지 않으며 실패합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 아약스에서

, 여기

let upload = ajax.post(PathHelper.apiPath + '/create/text').field('file', file); 
    upload.end((err, response) => { 
     if (err) { 
     console.log('Error Encountered', err); 
     } 
     if (response) { 
     const imageResponse = response.body; 
     console.log('imageresponse: ', imageResponse); 
     } 
    }); 

내 사가 코드 : 나는 REDUX - 사가에서 동일한 작업을 수행 할 때

export function* fetchText(text) { 
const formData = new FormData(); 
    formData.append('file', text.data); 
    console.log('formData: ', formData); 
    try { 
    const options = { 
     method: 'POST', 
     headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
     }, 
     body: formData 
    }; 
    const response = yield call(fetchJson, PathHelper.apiPath + '/create/text', options); 
    console.log('response: ', response); 

    } catch (err) { 
    console.log('Error saving your image', err); 
    } 
} 

Answer 1

, 그것은 작동하고

실패하지 않는다

Redux-saga 그 자체가 비동기 액션을 수행 중이며 일부는에 발사되었습니다.이벤트이므로 먼저 put 액션이 생략됩니다. 일반적으로 saga는 request과 같은 액션을 가로 채고 작업이 완료된 후 success 액션을 만듭니다. 이 경우 redux -reducer가 있어야 API 호출 결과를 받아 들여 UI 구성 요소에 적용 할 수 있습니다.

두 번째로 파일을 업로드하려면 enctype="multipart/form-data"의 라이브 HTML 양식이 필요하고 FormData 개체는 원본 양식에 첨부해야합니다. 여기에서 세부 사항을보십시오 : http://researchhubs.com/post/computing/javascript/upload-files-with-ajax.html