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;

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



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

감사합니다..