VUE3基礎教學：使用Vue.js外掛程式封裝圖片上傳元件

VUE3基礎教學：使用Vue.js外掛程式封裝圖片上傳元件

Vue.js是一款受歡迎的前端框架，它讓開發者可以用更少的程式碼創建更有效率、更靈活的應用程式.尤其是在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元件，其中包含一個2e1cf0710519d5598b1f0f14c36ba674和一個d5fd7aea971a85678ba271703566ebfd元素，用於選擇需要上傳的圖片文件，並使用vue-upload- image插件發送POST請求與後端進行通訊。上傳成功後，顯示所選的圖像檔案。在新增樣式之前，我們可以在我們的vue cli腳手架終端機中使用npm run serve指令以對應的本地地址查看該元件。

在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 run serve命令運行該應用程序，並在瀏覽器中查看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中文網其他相關文章！