VUE3 基本チュートリアル: Vue.js プラグインを使用して画像アップロード コンポーネントをカプセル化する

VUE3 基本チュートリアル: Vue.js プラグインを使用して画像アップロード コンポーネントをカプセル化する

Vue.js は、開発者が少ないコードでより効率的で柔軟なアプリケーションを作成できる人気のフロントエンド フレームワークです。プログラム。特に Vue.js 3 のリリース後、その最適化と改善により、より多くの開発者が Vue.js 3 を使用する傾向にあります。この記事では、Vue.js 3 を使用して画像アップロード コンポーネント プラグインをカプセル化する方法を紹介します。

開始する前に、Vue.js と Vue CLI がインストールされていることを確認する必要があります。まだインストールされていない場合は、ターミナルで次のコマンドを入力してインストールできます:

npm install -g vue
npm install -g @vue/cli

次に、Vue CLI を使用して新しいプロジェクトを作成し、ターミナルでプロジェクトのルート ディレクトリに移動します。 :

vue create image-uploader
cd image-uploader

次のコマンドを使用して、プロジェクトに Vue.js プラグインをインストールします:

npm install vue-upload-image --save

作成されたプロジェクトに、新しい node_modules ディレクトリが表示されます。これには、vue-upload-imageプラグインが含まれています。プロジェクトのルート ディレクトリに新しいコンポーネント ImageUploader.vue を作成し、次のコードをコンポーネントにコピーします。

<template>
  <div>
    <label for="photo">Upload Image:</label>
    <input type="file" ref="fileInput" id="photo" name="photo" v-on:change="uploadImage">
    <img v-if="image" :src="image" style="max-width:100%">
  </div>
</template>

<script>
import { reactive } from 'vue';
import { uploadImage } from 'vue-upload-image';

export default {
  name: 'ImageUploader',
  setup() {
    const state = reactive({
      image: null,
    });

    const uploadImage = async () => {
      const res = await uploadImage(this.$refs.fileInput.files[0]);
      if (res.status === 200) {
        state.image = res.data.url;
      }
    };

    return { state, uploadImage };
  },
};
</script>

<style>
</style>

コードでは、ImageUploader# という名前のコンポーネントを使用します。 要素と 要素を含む ## の Vue.js コンポーネントは、アップロードする必要がある画像ファイルの選択に使用されます。 vue-upload を使用します - イメージ プラグインはバックエンドと通信するために POST リクエストを送信します。アップロードが成功すると、選択した画像ファイルが表示されます。スタイルを追加する前に、vue cli スキャフォールディング ターミナルで npm runserve コマンドを使用して、対応するローカル アドレスにあるコンポーネントを表示できます。

vue コンポーネントでの使用

コンポーネント内で

ImageUploader.vue を呼び出すには、それをインポートし、別のコンポーネントで使用できるように登録するだけです。たとえば、次のコンテンツを App.vue に追加します。

<template>
  <div class="container">
    <ImageUploader />
  </div>
</template>

<script>
import ImageUploader from './components/ImageUploader.vue';

export default {
  name: 'App',
  components: {
    ImageUploader,
  },
};
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
}
</style>

これで、

npm runserve コマンドを使用してアプリケーションを実行し、ブラウザで表示できるようになりますhttp://localhost:8080 のアプリケーション。すべてがうまくいけば、アプリケーション内に「ImageUploader」と呼ばれるコンポーネントが存在し、このコンポーネントを使用して画像をアップロードできます。

最後に、画像アップロード コンポーネントをより適切に表示するためにスタイルを追加できます。

ImageUploader.vue を変更します:

<template>
  <div class="image-uploader">
    <label for="photo" class="image-uploader__label">
      <svg class="image-uploader__icon" viewBox="0 0 24 24">
        <path d="M19.5 7H4.5C3.673 7 3 7.673 3 8.5v7c0 .827.673 1.5 1.5 1.5h15c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5zm-9.75 6.75l-3-3.75h2.25V8h1.5v2.25h2.25l-3 3.75zm8.25-4.5v3h-1.5v-3h-3V8h3V5.25h1.5V8h3v1.5h-3z"/>
      </svg>
      <span class="image-uploader__text">Choose a file</span>
    </label>
    <input type="file" ref="fileInput" class="image-uploader__input" id="photo" name="photo" v-on:change="uploadImage">
    <img v-if="state.image" :src="state.image" class="image-uploader__preview" />
  </div>
</template>

<script>
import { reactive } from 'vue';
import { uploadImage } from 'vue-upload-image';

export default {
  name: 'ImageUploader',
  setup() {
    const state = reactive({
      image: null,
    });

    const uploadImage = async () => {
      const res = await uploadImage(this.$refs.fileInput.files[0]);
      if (res.status === 200) {
        state.image = res.data.url;
      }
    };

    return { state, uploadImage };
  },
};
</script>

<style scoped>
.image-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-uploader__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #999;
  padding: 1rem;
  margin: 2rem 0;
  border: dashed 2px #ccc;
  border-radius: 4px;
}

.image-uploader__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  fill: currentColor;
}

.image-uploader__input {
  display: none;
}

.image-uploader__text {
  text-transform: uppercase;
}

.image-uploader__preview {
  margin-top: 2rem;
  max-width: 100%;
  border-radius: 4px;
}
</style>

これで、画像アップロード コンポーネント スタイルが追加されました。プロジェクトを実行して効果を確認できます。これは非常に基本的な画像アップロード コンポーネントであり、必要に応じてコード内で変更および拡張できます。さらに、追加の機能と使用方法は、プラグインの GitHub ページ (

https://github.com/AlbertLucianto/vue-upload-image) で確認できます。

概要

この記事では、Vue.js 3 と vue-upload-image プラグインを使用して、基本的な画像アップロード コンポーネントをカプセル化する方法を紹介します。このコンポーネントには、検証、ファイル サイズ制限、プレビューなど、他の多くの機能を追加できます。このチュートリアルを使用して、より効率的で有用な Vue.js 開発を実現してください。

以上がVUE3 基本チュートリアル: Vue.js プラグインを使用して画像アップロード コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。