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;
다음은 버튼을 클릭할 때 트리거되는 메일 코드 기능입니다.
이것이 당신이 필요한 전부입니다 ..
이것이 도움이 되길 바랍니다 ..
당신이 아무것도 이해하지 못하는 경우 연락 무료 떨어졌다
감사합니다..
Reference
이 문제에 관하여(React JS에서 Cloudinary하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ficazzo/how-to-cloudinary-in-react-js-54fi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)