を使用してイメージのアップロード

この投稿では、ローカルからCloudaryに画像をアップロードします.私たちを作成しますuseCloudinary ファイルアップロードに関連するものの世話をするフック.

ライブラリ

ソルダージャ

アクシオス

SUID

短縮

機能

イメージプレビュー

アップロード

プログレスバー

イメージアップロード

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を保存します
そして、うまくアップロードされた後のCloudary URL.uploadProgress フィールドは画像データのパーセンテージを表示します
Cloudinaryにアップロードしました.alert 成功、エラー、警告メッセージを表示します.abortToken フィールドはAxiosを保存します
途中でリクエストを中止するヘルプ.handleImageChange() 関数はblob urlを画像の生成する
プレビューとAxiosキャンセルトークン
中間で要求を取り消す将来.handleImageRemove() プレビュー画像を削除し、取り消す
BLOB URLがBLOBメタデータで取得したメモリを消去します.handleImageUpload() 関数アップロードイメージ
Axios POSTリクエストを使用し、正常に画像を取得する
アップロードそれはBlobのURLを取り消し、曇りからイメージを表示
URL.handleUploadProgess() 関数トラックアップロードチャンク
イメージデータ.handleCancelUpload() 関数はaxosリクエストをキャンセルする.
クリエイト.env プロジェクトのルートでファイルし、必要な環境変数を追加します..env

VITE_CLOUDINARY_UPLOAD_PRESET=
VITE_CLOUDINARY_API_KEY=
VITE_CLOUDINARY_CLOUD_NAME=

接頭辞VITE_ ブラウザで環境変数にアクセスしたい場合に必要です.
suidライブラリを使用してUIを作成します.Suidは、Moli反応から移植される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;

ハルマンガラム / 画像をアップロード

を使用してイメージのアップロード

用途

これらのテンプレート依存関係はpnpm 経由pnpm up -Lri .
これは、あなたが見る理由ですpnpm-lock.yaml . それが言われて、どんなパッケージマネージャーも働きます.テンプレートをクローンすると、このファイルを安全に削除できます.
インストールするか、またはインストールする

充実したウェブサイトでより多くを学んで、我々の不和の上で我々と話しに来てください

利用可能なスクリプト

プロジェクトディレクトリで実行できます.

NPM devかNPM起動

開発モードでアプリケーションを実行します.
オープンhttp://localhost:3000 ブラウザで表示するには.
あなたが編集をするならば、ページは再ロードされます.

NPMのビルド

生産のためのアプリケーションをビルドしますdist フォルダ.
それは正しく生産モードで固体バンドルと最適なパフォーマンスのためのビルドを最適化します.
ビルドはミニ化され、ファイル名はハッシュを含みます.
あなたのアプリケーションを展開する準備が整いました!

展開

…する.
View on GitHub