이 튜토리얼에서는 Preview to Rest API를 사용하여 Material UI 이미지 업로드 예제를 빌드하는 방법을 보여 드리겠습니다. React 앱이 사용하는 악시오스 그리고 멀티파트 HTTP 요청을 만들기 위한 파일, 진행률 표시줄을 위한 Material UI 및 기타 UI 구성 요소. 또한 이미지 정보의 표시 목록이 있습니다(다운로드 URL 포함).
전체 기사: 미리보기, Axios 및 진행률 표시줄이 있는 머티리얼 UI 이미지 업로드 예제
더 많은 연습:
개요
사용자가 다음을 수행할 수 있는 React Material UI 이미지 업로드 애플리케이션을 만들 것입니다.- 업로드하기 전에 이미지 미리보기 표시
- 진행률 표시줄이 있는 업로드 프로세스(백분율) 보기
- 업로드된 모든 이미지 보기
- 파일명 클릭 시 이미지 다운로드 링크
기술
- 반응 16/17
- 악시오스 0.21.1
- 머티리얼 UI 4.11.3
파일 업로드 및 저장을 위한 Rest API
다음은 React 앱이 작동할 API입니다.| 행동 양식 | URL | 행위 |
|---|---|---|
| 우편 | /업로드 | 파일을 올리다 |
| 가져 오기 | /파일 | 파일 목록 가져오기(이름 및 URL) |
| 가져 오기 | /파일/[파일 이름] | 파일 다운로드 |
다음 게시물 중 하나에서 Rest API 서버를 구현하는 방법을 찾을 수 있습니다.
opencv k는 예를 의미합니다.
또는: Spring Boot Multipart 파일 업로드(데이터베이스로) 예제
Material UI 업로드 이미지를 위한 React 앱
React 프로젝트 빌드가 완료되면 폴더 구조는 다음과 같습니다.
간단히 설명드리겠습니다.
-
업로드 이미지.서비스 Axios를 사용하여 이미지를 업로드하고 파일을 가져오는 방법을 제공합니다.
-
업로드 파일.컴포넌트 머티리얼 UI 업로드 양식, 진행률 표시줄, 다운로드 URL이 있는 목록 이미지 표시가 포함되어 있습니다.
-
앱.js 모든 React 구성 요소를 포함하는 컨테이너입니다.
-
우리는 스타일을 사용자 정의 앱.css .
-
http-common.js HTTP 기반 URL 및 헤더로 Axios를 초기화합니다.
-
우리는 앱에 대한 포트를 구성합니다. .env
마스킹 전화 번호 jquery
자세한 내용은 다음을 방문하십시오.
미리보기, Axios 및 진행률 표시줄이 있는 머티리얼 UI 이미지 업로드 예제
#react #javascript #web-development #material-ui #file #업로드
bezkoder.com
미리보기가 포함된 머티리얼 UI 이미지 업로드 예시
빌드 React Material UI 이미지 업로드(미리 보기 포함) 예제, 진행률 표시줄, Axios - Material UI 업로드 이미지 및 Display to Rest API / Web API