SolidJS 및 Cloudinary를 사용한 이미지 업로드

이 게시물에서는 로컬에서 cloudinary로 이미지를 업로드합니다. 파일 업로드와 관련된 작업을 처리하는 후크useCloudinary를 생성합니다.

도서관

솔리드JS

악시오스

수이드

쇼티드

특징

이미지 미리보기

Cloudinary에 업로드

진행 표시줄

이미지 업로드 중단

src/hooks/useCloudinary.jsx

import axios from "axios";
import shortid from "shortid";
import { createStore } from "solid-js/store";

const url = `https://api.cloudinary.com/v1_1/${
  import.meta.env.VITE_CLOUDINARY_CLOUD_NAME
}/image/upload`;

export default function useCloudinary() {
  const [store, setStore] = createStore({
    image: null,
    imagePreview: "",
    uploadProgress: 0,
    alert: null,
    abortToken: null,
  });

  function handleImageChange(e) {
    const image = e.target.files[0];
    // create blob url of selected image for preview
    const imagePreview = URL.createObjectURL(image);
    // create axios cancellation token to abort request in future
    const abortToken = axios.CancelToken.source();

    setStore("image", image);
    setStore("imagePreview", imagePreview);
    setStore("abortToken", abortToken);
    setStore("alert", {
      severity: "success",
      text: "Image loaded successfully",
    });
  }
  function handleImageRemove() {
    // cleanup blob  metadata
    URL.revokeObjectURL(store.imagePreview);
    window.location.reload();
  }
  async function handleImageUpload() {
    try {
      const formData = new FormData();
      formData.append("file", store.image);
      formData.append(
        "upload_preset",
        import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET
      );
      formData.append("api_key", import.meta.env.VITE_CLOUDINARY_API_KEY);
      formData.append("public_id", shortid.generate());

      const response = await axios.post(url, formData, {
        onUploadProgress: handleUploadProgess,
        cancelToken: store.abortToken.token,
      });
      setStore("alert", {
        severity: "success",
        text: "Image uploaded to cloudinary successfully",
      });

      // revoke preview blob url
      URL.revokeObjectURL(store.imagePreview);
      setStore("imagePreview", response.data.url);
    } catch (error) {
      console.log(error);
    }
  }

  function handleUploadProgess(progressEv) {
    const progress = Math.floor((progressEv.loaded / store.image.size) * 100);
    console.log(progress);
    setStore("uploadProgress", progress);
  }

  function handleCancelUpload() {
    store.abortToken.cancel();
    setStore("alert", {
      severity: "error",
      text: "Image upload aborted",
    });
  }
  return {
    store,
    handleImageChange,
    handleImageRemove,
    handleImageUpload,
    handleCancelUpload,
  };
}

우리는 새로운 상점을 만들고 초기 값으로 초기화했습니다.
image 필드는 로컬에서 선택한 이미지를 저장합니다.
imagePreview 필드는 이미지 미리보기를 위한 이미지 URL을 저장합니다.
성공적으로 업로드된 후 cloudinary URL입니다.
uploadProgress 필드는 이미지 데이터의 백분율을 표시합니다.
cloudinary에 업로드되었습니다.
alert 성공, 오류 및 경고 메시지를 표시합니다.
abortToken 필드는 Axios CancelTokenSource를 저장합니다.
중간에 요청을 중단하는 데 도움이 됩니다.
handleImageChange() 이미지의 blob URL을 만드는 함수
우리가 사용할 수 있는 미리보기 및 axios 취소 토큰
중간에 요청을 취소하는 미래.
handleImageRemove() 메서드는 미리 보기 이미지를 제거하고 취소합니다.
blob 메타데이터에서 획득한 메모리를 정리하기 위한 blob url.
handleImageUpload() Cloudinary에 이미지 업로드 기능
axios post request 사용 및 이미지가 성공적으로 실행되었을 때
업로드하면 Blob URL이 취소되고 cloudinary에서 이미지가 표시됩니다.
URL.
handleUploadProgess() 기능 추적 업로드 청크
이미지 데이터.
handleCancelUpload() 함수 취소 축 요청.

프로젝트 루트에 .env 파일을 생성하고 필요한 환경 변수를 추가합니다.
.env

VITE_CLOUDINARY_UPLOAD_PRESET=
VITE_CLOUDINARY_API_KEY=
VITE_CLOUDINARY_CLOUD_NAME=

브라우저에서 환경 변수에 액세스하려면 접두사VITE_가 필요합니다.

SUID 라이브러리를 사용하여 UI를 생성합니다. SUID는 MUI React에서 포팅된 Solidjs용 컴포넌트 머티리얼 디자인입니다.

import { ThemeProvider } from "@suid/material";
import Alert from "@suid/material/Alert";
import Button from "@suid/material/Button";
import Card from "@suid/material/Card";
import CardActions from "@suid/material/CardActions";
import CardMedia from "@suid/material/CardMedia";
import Container from "@suid/material/Container";
import Grid from "@suid/material/Grid";
import LinearProgress from "@suid/material/LinearProgress";
import Stack from "@suid/material/Stack";
import { Show } from "solid-js";
import useCloudinary from "./hooks/useCloudinary";

function App() {
  let fileInputRef = null;
  const {
    store,
    handleImageChange,
    handleImageRemove,
    handleImageUpload,
    handleCancelUpload,
  } = useCloudinary();
  return (
    <ThemeProvider>
      <Container>
        <Grid container sx={{ justifyContent: "center" }}>
          <Grid item md={6} xs={12}>
            <Show when={store.alert}>
              <Alert sx={{ mt: 4, mb: 4 }} severity={store.alert.severity}>
                {store.alert.text}
              </Alert>
            </Show>

            <input
              type="file"
              hidden
              ref={fileInputRef}
              accept="image/*"
              onChange={handleImageChange}
            />
            <Button
              onClick={() => fileInputRef.click()}
              variant="contained"
              size="large"
            >
              Select Image
            </Button>

            <Show when={store.uploadProgress}>
              <Stack direction={"column"} spacing={2}>
                <LinearProgress
                  sx={{ mt: 4 }}
                  variant="determinate"
                  value={store.uploadProgress}
                />
                <Button
                  variant="contained"
                  color="error"
                  onClick={handleCancelUpload}
                >
                  Cancel Upload
                </Button>
              </Stack>
            </Show>

            <Show when={store.imagePreview}>
              <Card sx={{ mt: 4 }}>
                <CardMedia
                  component="img"
                  height="600px"
                  image={store.imagePreview}
                  alt="Image Preview"
                />

                <CardActions>
                  <Button
                    variant="contained"
                    color="error"
                    onClick={handleImageRemove}
                  >
                    Remove
                  </Button>
                  <Button
                    variant="contained"
                    color="success"
                    onClick={handleImageUpload}
                  >
                    Upload
                  </Button>
                </CardActions>
              </Card>
            </Show>
          </Grid>
        </Grid>
      </Container>
    </ThemeProvider>
  );
}

export default App;

거친 망 갈람 / 솔리드 클라우드 이미지 업로드

solidjs 및 cloudinary를 사용한 이미지 업로드

용법

이러한 템플릿 종속성은 pnpm을 통해 pnpm up -Lri를 통해 유지됩니다.
이것이 pnpm-lock.yaml 가 표시되는 이유입니다. 즉, 모든 패키지 관리자가 작동합니다. 템플릿을 복제하면 이 파일을 안전하게 제거할 수 있습니다.

$ npm install # or pnpm install or yarn install

Solid 웹사이트에서 자세히 알아보고 Discord에서 대화를 나누세요.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm dev 또는 npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.

npm 실행 빌드

프로덕션용 앱을 dist 폴더에 빌드합니다.
프로덕션 모드에서 Solid를 올바르게 번들하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!

전개

당신은 할 수 있습니다…

View on GitHub