회원들의 프로필 사진, 그들이 올린 이미지 / 비디오 등을 어딘가에 저장하고 싶다면? 우리는 확실히 대부분의 데이터베이스를 사용할 수 없습니다. 일부 데이터베이스 서비스를 사용하면 이미지를 클라우드에 업로드 할 수 있지만 대부분의 요구에 사용할 수 없습니다!. 그렇지 않으면 업로드 된 이미지의 URL 을 저장 해야합니다 . 이 가운데 Cloudinary가

Cloudinary는 클라우드 기반 이미지 및 비디오 관리 서비스를 제공하는 SaaS 기술 회사입니다. 이를 통해 사용자는 웹 사이트 및 앱에 대한 이미지와 비디오를 업로드, 저장, 관리, 조작 및 전달할 수 있습니다.

그래서 그것에 뛰어 들자 !

함유량

• UI 설정 (React)
  전역 적으로 최신 버전의 create-react-app을 설치했는지 확인하십시오. npm i create-react-app -g)
• 위로 Cloudinary 설정
  (만들기 있는지 당신의 계정이 Cloudinary를 )
• 기능 설정
• UI 업데이트

이 기사에서는 CMD (윈도우 터미널)와 VSCode (원하는대로 아무거나 사용할 수 있습니다!)

우선, 당신의 CMD를의 디렉토리 및 유형 탐색 npx create-react-app cloudinary-tutorial, cloudinary-tutorial프로젝트의 이름입니다

설치 후 폴더로 이동 cd cloudinary-tutorial && code .하십시오. 그러면 VSCode가 열립니다.
이제 청소 과정이 나옵니다.

정리 프로세스는 다음 App.test.js과 같은 원치 않는 파일을 삭제하고 폴더 setupTests.js에서 src다음으로 App.js대체하는 모든 코드를 정리 (제거)하는 것으로 구성됩니다.

//App.js
import React from "react";
import "./App.css";
function App() {
 return (
  <div className="app">
  <input type="file" className="app_uploadInput" />
  <button className="app_uploadButton">Upload</button>
  </div>
 );
}
export default App;

//App.css
.app {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}
.app_uploadButton {
 height: 2rem;
 width: 5rem;
 background-color: black;
 color: white;
}

개발 서버를 시작하려면 Ctrl+Shift+` VSCode에서 새 터미널을 연 다음 다음을 입력합니다. npm start이제 localhost:3000브라우저에서 열면 다음과 같은 내용이 표시됩니다.

그리고 그게 다야! 좋은 소식은 UI 설정 (React)을 완료했다는 것입니다.

Cloudinary 설정

이제 Cloudinary를 설정하겠습니다!
로그인 후 대시 보드로 이동하여 여기 에서 클라우드 이름 을 복사하십시오 .

또한 upload_preset이 필요합니다 . 이를 위해 설정으로 이동하십시오.

업로드 탭으로 이동합니다.

업로드 사전 설정 섹션까지 아래로 스크롤하고 업로드 사전 설정 추가를 클릭합니다 .

새 페이지에서 서명 모드 를 서명되지 않음 으로 선택하고 함께 업로드 사전 설정 이름을 복사하고 저장을 클릭합니다.

그리고 그게 다야! 좋은 소식은 Cloudinary 설정을 완료했다는 것입니다.

기능 설정

먼저 onClick버튼에 대한 핸들러를 추가해 보겠습니다 . 이를 위해 App.js및 다음으로 다시 이동하십시오 .

function App() {
 const handleClick = () => {};
return (
 <div className="app">
 <input type="file" className="app_uploadInput" />
 <button className="app_uploadButton" onClick={handleClick}>Upload</button>
</div>
 );
}

function App() {
const cloud_name = "your_cloud_name";
const upload_preset = "your_upload_preset"; 
const handleClick = () => {
 const { files } = document.querySelector(".app_uploadInput");
 const formData = new FormData();
 formData.append("file", files[0]);
 formData.append("upload_preset", upload_preset);
 const options = {
  method: "POST",
  body: formData,
 };
 return fetch(`https://api.Cloudinary.com/v1_1/${cloud_name}/image/upload`, options
)
 .then((res) => res.json())
 .then((res) => console.log(res))
 .catch((err) => console.log(err));
};
//rest of code

이제 앱을 테스트 해 보겠습니다. 로 이동하여 localhost:3000하나의 파일을 업로드하고 버튼을 클릭합니다. 콘솔에서 결과를 볼 수 있습니다!

그리고 그게 다야! 좋은 소식은 기능 설정을 완료했습니다. :)

UI 업데이트

이제 업로드 된 이미지를 UI에 표시하겠습니다 .
이를 위해 먼저 State Hook을 생성 해 보겠습니다 .

import { useState } from "react";
function App() {
 const [imageUrl, setImageUrl] = useState("");
//rest of the code

<div className="app">
 <input type="file" className="app_uploadInput" />
 <img src={imageUrl} className="app_uploadedImg" alt="" />
 <button className="app_uploadButton" onClick={handleClick}>Upload</button>
</div>

.app_uploadedImg {
 height: 10rem;
 width: 10rem;
 position: absolute;
 top: 0;
}

다음으로 가장 중요한 부분입니다!
POST 요청을 다음과 같이 편집하십시오.

return fetch(`https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`, options)
 .then((res) => res.json())
 .then((res) => {
  setImageUrl(res.secure_url);
 })
 .catch((err) => console.log(err));

그리고 그게 다야! 좋은 소식은 UI 업데이트를 완료했다는 것입니다.

Cloudinary 대시 보드를 방문하여 업로드 된 이미지를보고, 편집하고, 삭제할 수 있습니다.

오늘은 그게 다야 ! 이 기사를 읽는 것이 지루하다면이 흥미로운 팁을 찾으십시오. 'GitLab'이라는 이름이 어떻게 형성 되었습니까? 문자 'Gitla-b'를 결합하여. 그게 다야! 좋은 소식은 당신이 내 작은 농담을 다 읽었다는 것입니다 !

여러분 모두가 좋아하길 바랍니다!

감사!