ホームページ > 記事 > ウェブフロントエンド > 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# という名前のコンポーネントを使用します。
2e1cf0710519d5598b1f0f14c36ba674 要素と
d5fd7aea971a85678ba271703566ebfd 要素を含む ## の Vue.js コンポーネントは、アップロードする必要がある画像ファイルの選択に使用されます。 vue-upload を使用します - イメージ プラグインはバックエンドと通信するために POST リクエストを送信します。アップロードが成功すると、選択した画像ファイルが表示されます。スタイルを追加する前に、vue cli スキャフォールディング ターミナルで
npm runserve コマンドを使用して、対応するローカル アドレスにあるコンポーネントを表示できます。
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) で確認できます。
以上がVUE3 基本チュートリアル: Vue.js プラグインを使用して画像アップロード コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。