React JS에서 Cloudinary하는 방법.

Hey Fellas, 오늘 우리는 반응 js에서 cloudinary하는 방법에 대해 논의할 것입니다.

먼저 cloudinary가 무엇을 수반하고 무엇을 위해 사용되는지 알려주고 싶습니다.

*Cloudinary는 웹사이트 및 모바일 앱을 위한 엔드 투 엔드 이미지 및 비디오 관리 솔루션으로, 이미지 및 비디오 업로드, 저장, 조작, 최적화, 파일 구성에서 클라우드에서 수행되는 모든 전송에 이르기까지 모든 것을 다룹니다.

예, 여기에 명시된 바와 같이 .
예를 들어 풀스택 애플리케이션에서 작업 중이고 프런트엔드에서 클라우드로 구축하는 애플리케이션에서 자산의 속도, 최적화 및 품질을 고려하여 비디오, 이미지 등을 관리할 수 있는 매체가 필요합니다. 이러한 모든 작업으로 백엔드를 막히게 하는 대신 비효율적으로 만듭니다.

Cloudinary 은 지금까지 본 것 중 최고이며 단순성 때문에 정말 마음에 듭니다.
다른 예는 다음과 같습니다.
1.업로드케어
2. 선생님
3.Imagekit.io
4.클라우드컨버트

*Cloudinary 설정 단계 *
1.Cloudinary에 가입/로그인합니다.
2. 생성한 계정의 클라우드 이름을 설정합니다.
3. 설정/업로드로 이동
4. "업로드 가능 : 서명되지 않음"을 설정하십시오.
5. Cloudinary 사용 시작

React Js에서 Cloudinary로 가는 단계
공개에서 비밀 키를 저장하는 데 도움이 되도록 env 파일을 설정해야 합니다.

REACT_APP_CLOUDINARY_KEY = SECRET-KEY 

여기에 사용된 패키지는 React-Toastify입니다.

아래는 도움이 되는 반응 구성 요소 코드입니다.

import React from "react"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; const Cloud = () => { const [image, setImage] = React.useState(); return ( <div> <ToastContainer position="top-right" autoClose={2000} hideProgressBar={true} newestOnTop={false} closeOnClick /> <div> <div className="col-span-3"> <label className="block text-sm font-medium text-gray- 700"> Product Image </label> <div className="mt-1 border-2 border-gray-300 border- dashed rounded-md px-6 pt-5 pb-6 flex justify-center"> <div className="space-y-1 text-center"> {image ? ( <img src={image.blog} alt="Mart" /> ) : ( <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true" > <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172- 3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /> </svg> )} <div className="flex text-sm text-gray-600"> <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium main-clr focus- within:outline-none focus-within:ring-2 focus- within:ring-offset-2 " > <span className="text-center ">Upload a file</span> <input id="file-upload" name="file-upload" type="file" className="sr-only" onChange={(e) => { e.preventDefault(); setImage({ file: e.target.files[0], blog: URL.createObjectURL(e.target.files[0]), }); console.log(e.target.files[0]); }} /> </label> <p className="pl-1">or drag and drop</p> </div> <p className="text-xs text-gray-500">PNG, JPG not up to 1MB</p> </div> </div> </div> <div className="text-center my-4"> <button type="submit" onClick={onCloudinary} className="main-bg mx-3 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify- center text-sm font-medium text-white focus:outline- none focus:ring-2 focus:ring-offset-2" > {" "} Upload </button> </div> </div> </div> ); }; export default Cloud; 

다음은 버튼을 클릭할 때 트리거되는 메일 코드 기능입니다.



이것이 당신이 필요한 전부입니다 ..
이것이 도움이 되길 바랍니다 ..
당신이 아무것도 이해하지 못하는 경우 연락 무료 떨어졌다

감사합니다..