React & Expo - 파일 업로드 및 다운로드 방법

소개

Expo 기반 모바일 앱에서 파일을 업로드하고 다운로드하는 방법에 대한 명확한 예를 찾으려고 애썼습니다. 같은 문제에 직면한 다른 사람들이나 단순히 호기심이 많은 사람들을 돕기 위해 이 게시물을 썼습니다.

이 과정에서 이해해야 할 주요 개념을 살펴보겠습니다.

• 버퍼
• 인텐트 필터
• MIME 유형
• 애플리케이션/옥텟 스트림
• 다중 부분/양식 데이터
• 그 외...

우리가 다룰 내용:

• Fastify 서버로 파일을 보내고 받습니다.
• React 웹 앱에서 파일 업로드, 다운로드 및 표시
• React Native(Expo) 모바일 앱에서 파일 업로드, 다운로드 및 표시

모든 코드와 Postman 컬렉션은 내 GitHub에서 확인할 수 있습니다.

섬기는 사람

서버는 Fastify(Express.js의 현대화된 버전)에서 실행됩니다. 앱을 시작하려면 다음을 수행하세요.

1. 터미널을 사용하여 /server로 이동하세요.
2. npm install로 종속성 설치
3. npm run dev를 사용하여 서버를 실행하세요.

app.js에는 세 가지 주요 엔드포인트가 있습니다.

- 다운로드 엔드포인트(/download)

이 엔드포인트는 createReadStream()을 사용하여 example.webp를 스트림으로 보냅니다. MIME 유형이 포함되어 클라이언트가 파일 처리 방법을 알 수 있습니다. 예를 들어.webp의 경우 image/webp가 됩니다.

?참고: MIME 유형은 전송되는 파일의 형식을 정의합니다. 이는 클라이언트가 이를 올바르게 표시하는 데 도움이 됩니다.
더 많은 MIME 유형을 확인하세요.

Content-Disposition 헤더는 클라이언트에 콘텐츠가 표시되는 방식을 정의합니다. 첨부파일 포함; 파일 이름=<파일 이름> 파일을 인라인으로 표시하는 대신 브라우저에 파일을 다운로드하라는 메시지를 표시합니다. 직접 표시하려면 첨부파일 대신 인라인을 사용하세요.
콘텐츠 처리에 대해 자세히 알아보기

- 양식 데이터(/upload-multiples)를 사용하여 다중 파일 업로드

이 엔드포인트는 다중 부분/양식 데이터 요청을 수락합니다. 그것은:

1. 요청에서 파일을 검색합니다.
2. 각 파일을 버퍼(바이너리 데이터의 JavaScript 표현)로 변환합니다.
3. 파일을 /upload 디렉터리에 저장합니다.

예를 들어 요청은 다음과 같습니다.

- 옥텟 스트림(/upload-octet-stream)을 사용하여 파일 업로드

이 엔드포인트는 요청 본문(애플리케이션/옥텟 스트림)에 단일 바이너리 파일이 있을 것으로 예상합니다. multipart/form-data와 달리 파일은 이미 바이너리 데이터이므로 디스크에 직접 쓸 수 있습니다.

요청은 Postman에서 다음과 같이 표시됩니다.

웹(반응)

앱을 실행하려면:

1. 터미널을 사용하여 /web으로 이동하세요.
2. npm install로 종속성 설치
3. npm run dev를 사용하여 앱 시작

웹 애플리케이션의 모든 기능은 App.tsx에 포함되어 있습니다.

이 React 앱은 세 가지 주요 기능을 제공합니다.

- 파일 다운로드/표시

사용자가 "다운로드" 버튼을 클릭하면 앱은 다음을 수행합니다.

1. /download 엔드포인트를 호출합니다.
2. 파일을 바이너리 blob으로 받습니다.
3. Blob에서 objectURL을 생성하여 브라우저가 액세스할 수 있는 임시 URL 역할을 합니다.

동작은 서버에서 반환된 Content-Disposition 헤더에 따라 다릅니다.

• Content-Disposition에 인라인이 포함된 경우 파일이 새 탭에 표시됩니다.
• 첨부파일이 포함된 경우 자동으로 파일이 다운로드됩니다.

다운로드를 실행하기 위해 앱은 임시 href가 objectURL로 설정된 요소를 프로그래밍 방식으로 클릭하여 사용자 다운로드 작업을 시뮬레이션합니다.

- 양식 데이터를 사용하여 파일 업로드

"파일 업로드" 버튼을 클릭한 경우:

1. uploadFile 함수가 실행되어 숨겨진 요소를 사용하고 사용자 클릭을 시뮬레이션합니다.
2. 사용자가 하나 이상의 파일을 선택하면 해당 파일이 FormData 개체에 추가됩니다.
3. 요청은 multipart/form-data를 통해 파일을 허용하는 /upload-multiples 엔드포인트로 전송됩니다.

이를 통해 서버는 업로드된 파일을 적절하게 처리하고 저장할 수 있습니다.

- 옥텟 스트림을 사용하여 파일 업로드

이 접근 방식은 multipart/form-data를 사용하는 것보다 간단합니다. 요청 본문에 파일을 바이너리 데이터로 직접 보내고 요청 헤더에 파일 이름을 포함하면 됩니다.

모바일(엑스포)

다음과 같이 앱을 시작할 수 있습니다.

1. 단말기에서 모바일 디렉토리로 이동하세요.
2. 종속성 설치: npm install
3. npm run android 또는 npm run ios를 사용하여 프로젝트를 실행하세요.

주요 논리는 다음을 렌더링하는 App.tsx에 있습니다.

파일을 새 보기에 표시하려면(예: 브라우저가 새 탭에서 파일을 열 때처럼) 응답을 blob으로 읽은 다음 FileReader를 사용하여 base64로 변환해야 합니다.

캐시 디렉터리(앱만 액세스할 수 있는 비공개 디렉터리)에 파일을 작성한 다음 사용자가 iOS를 사용하는 경우 IntentLauncher 또는 Sharing을 사용하여 표시합니다.

- 파일 다운로드

이것은 웹 프로세스와 유사하지만 FileReader를 사용하여 blob을 base64로 읽은 다음 사용자가 파일을 저장하려는 위치에 파일을 다운로드할 수 있는 권한을 요청해야 합니다.

- 양식 데이터를 사용하여 파일 업로드

DocumentPicker를 사용하여 사용자가 파일을 선택할 수 있도록 한 다음 FormData를 활용하여 선택한 파일을 요청에 추가합니다. 과정은 매우 간단합니다.

- 옥텟 스트림으로 파일 업로드

FormData를 사용하는 것보다 애플리케이션/옥텟 스트림으로 업로드하는 것이 훨씬 더 간단합니다. 파일 세부 정보와 콘텐츠 유형으로 헤더를 설정한 다음 파일을 요청 본문에 추가하면 끝입니다!

결론

플랫폼 간 파일 보기, 다운로드, 업로드 방법은 다소 혼란스러울 수 있습니다. 이 게시물에서는 가장 일반적인 파일을 살펴보았습니다.

도움이 되었기를 바랍니다.

@twitter에서 팔로우해주세요

위 내용은 React & Expo - 파일 업로드 및 다운로드 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!