Django Rest 프레임워크 및 Filepond ReactJS

Filepond ReactJS와 DRF 통합

왜요? Pythonists를 위한 놀라운 즉시 사용 가능한 솔루션이기 때문입니다. 간단히 살펴보십시오.



Filepond 구성 요소를 통해 사진을 업로드하기 위한 Django REST Framework 플러그인이 있습니다. 그것은 훌륭하게 작동합니다! Filepond에는 사진을 업로드하는 데 필요한 모든 것이 있습니다. 모든 것이 깔끔하게 함께 작동하고 사용 후 정말 행복합니다. 다양한 브라우저에서 작동하고 Amazin S3와 통합되며 강력한 옵션이 있습니다.

Here 실시간으로 확인할 수 있습니다. (heroku에 있기 때문에 부팅하려면 오래 기다려야 합니다(시간이 초과되면 페이지를 새로고침해야 합니다).)

Django는 사진을 업로드할 때 번거롭다고 알려져 있습니다. Filepond와 깔끔하게 통합되는 즉시 사용할 수 있는 솔루션이 있어 다행입니다. 내 경우에는 문서를 이해할 때 몇 가지 문제가 있었기 때문에 튜토리얼을 만들기로 결정했습니다.

Goal: Integrate django-drf-filepond with react-filepond

우리가 해야 할 일:

이전tutorial on Filepond VueJS에서 DRF 확장을 사용하는 방법에 대해 자세히 썼습니다. 여기서는 프런트 엔드 코드를 보여주고 스스로 찾을 수 있는 코드boilerplate on github를 제공합니다.

버튼을 클릭하여 heroku에 직접 배포할 수도 있습니다.



(배포할 준비가 된 더 유용한 리포지토리를 확인하려면)

반응 구성 요소 설정

일반적으로 매우 간단합니다. the official repo에서 공식 문서를 따를 수 있습니다. 생략된 가장 중요한 부분은 프런트 엔드에 VueJS 구성 요소를 설치하고 배치할 때 이름을 filepond로 변경해야 한다는 점입니다. ReactJS의 경우 업로드를 POST하기 위해 서버를 DRF 끝점 fp/process/로 변경하는 것도 중요합니다.

<FilePond
  ref={ref => (this.pond = ref)}
  files={this.state.files}
  allowMultiple={true}
  allowReorder={true}
  maxFiles={3}
  server="http://127.0.0.1:8000/fp/process/"
  name="filepond"
  oninit={() => this.handleInit()}
  onupdatefiles={fileItems => {
    // Set currently active file objects to this.state
    this.setState({
      files: fileItems.map(fileItem => fileItem.file),
    })
  }}
/>

모든 클래스, 함수 및 setState 처리에 문제가 있는 경우 확인할 수 있습니다in the repo’s file. 💁🏻

배포된 heroku 버전에서 사용할 때의 모습입니다.



그것이 도움이 되었는지 또는 더 나은/더 많은 설명을 원하시면 알려주세요.


Filepond를 사용할 때 실수를 했거나 여기에서 본 적이 있습니까? 당신의 통찰력에 대해 말해주세요. 의견을 댓글로 남겨주세요.