blog.bundles.dev

redux-thunk, multiparty, axios를 이용하여 원격 저장소(서버)에 파일 업로드

redux를 사용하고 비동기로 file upload하기 위해 redux-thunk를 사용한다.

자세한 흐름은 아래와 같다.

추가로, 요청할 때 progress도 요청한다.

  1. axios post를 이용한 파일 업로드

     const reqUploadFilesImpl = (files, onUploadProgress = F.emptyFunc) => {
       const url = C.API_URL.FILE;
       const formData = new FormData();
       files.forEach((file, i) => formData.append(['file', i].join(''), file));
       const config = {
         headers: {
           'content-type': 'multipart/form-data',
         },
         onUploadProgress,
       };
       return axios.post(url, formData, config);
     };
    

    formData에 file 객체를 담아 post 통신한다.