快捷導(dǎo)航

如何使用Vue3構(gòu)建一個(gè)圖像畫廊(支持圖片上傳)

更新時(shí)間：2024年09月06日 10:13:26 作者：JJCTO袁龍

這篇文章主要給大家介紹了關(guān)于如何使用Vue3構(gòu)建一個(gè)圖像畫廊(支持圖片上傳)的相關(guān)資料,Vue畫廊這是vue編寫的圖庫應(yīng)用程序,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在現(xiàn)代網(wǎng)頁開發(fā)中，圖像畫廊一直是一個(gè)受歡迎的功能。它不僅可以展示圖片，還能為用戶提供友好的互動(dòng)體驗(yàn)。在這篇文章中，我們將使用Vue3構(gòu)建一個(gè)簡單的圖像畫廊，并實(shí)現(xiàn)圖片上傳功能。我們將使用Vue3的Composition API，特別是setup語法糖，使我們的代碼更加簡潔和易于維護(hù)。

項(xiàng)目準(zhǔn)備

在開始之前，我們需要一個(gè)基本的Vue3項(xiàng)目。你可以使用Vue CLI或者直接使用Vite快速創(chuàng)建一個(gè)新的Vue3項(xiàng)目。以下是使用Vite創(chuàng)建Vue3項(xiàng)目的步驟：

npm create vite@latest my-image-gallery --template vue
cd my-image-gallery
npm install

啟動(dòng)項(xiàng)目后，在瀏覽器中訪問 http://localhost:3000，你將看到一個(gè)空白頁面。

設(shè)計(jì)畫廊組件

我們的畫廊將包括三個(gè)主要部分：

圖片上傳區(qū)
圖片預(yù)覽區(qū)
圖片畫廊展示區(qū)

我們來創(chuàng)建一個(gè)名為 ImageGallery.vue 的組件，在該組件中實(shí)現(xiàn)上述功能。

創(chuàng)建 ImageGallery.vue

在 src/components 目錄下，創(chuàng)建一個(gè)新的文件 ImageGallery.vue，并添加以下代碼：

<template>
  <div class="image-gallery">
    <h1>圖像畫廊</h1>
    <div>
      <input type="file" @change="onFileChange" accept="image/*" multiple />
    </div>
    <div class="preview-container">
      <h2>預(yù)覽</h2>
      <div class="image-preview" v-if="images.length > 0">
        <img v-for="(image, index) in images" :key="index" :src="image" alt="Image Preview" />
      </div>
      <p v-else>沒有圖像可預(yù)覽</p>
    </div>
    <div class="gallery">
      <h2>畫廊展示</h2>
      <div class="image-gallery-display">
        <img v-for="(image, index) in uploadedImages" :key="index" :src="image" alt="Uploaded Image" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([]);
const uploadedImages = ref([]);

const onFileChange = (event) => {
  const files = event.target.files;
  const imageUrls = [];

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();

    reader.onload (e) => {
      imageUrls.push(e.target.result);
      if (imageUrls.length === files.length) {
        // 圖片加載完成后更新狀態(tài)
        images.value = imageUrls;
      }
    };

    reader.readAsDataURL(file);
  }
};

const uploadImages = () => {
  uploadedImages.value = [...uploadedImages.value, ...images.value];
  images.value = []; // 清空預(yù)覽
};
</script>

<style scoped>
.image-gallery {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.image-preview img {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.gallery {
  margin-top: 20px;
}

.image-gallery-display img {
  width: 150px;
  height: 150px;
  margin: 5px;
}
</style>

代碼解讀

模板部分 (<template>):
- 我們使用一個(gè)文件輸入框來允許用戶上傳圖片。
- 預(yù)覽區(qū)用來展示用戶正在上傳的圖片。
- 畫廊展示區(qū)用來展示用戶已成功上傳的圖片。
邏輯部分 (<script setup>)：
- 我們定義了兩個(gè)響應(yīng)式數(shù)據(jù) images 和 uploadedImages，分別用于存儲(chǔ)用戶預(yù)覽的圖片和已經(jīng)上傳到畫廊的圖片。
- onFileChange 函數(shù)處理文件選擇的事件，使用 FileReader API 將用戶選擇的文件轉(zhuǎn)換為數(shù)據(jù)URL并更新預(yù)覽數(shù)據(jù)。
- uploadImages 函數(shù)將預(yù)覽的圖片添加到畫廊展示，隨后清空預(yù)覽。
樣式部分 (<style scoped>)：
- 這里簡單地定義了一些樣式，以確保畫廊的布局整潔。

將組件添加到主應(yīng)用中

接下來，我們需要在主應(yīng)用中引入這個(gè)組件。打開 src/App.vue，并修改它如下：

<template>
  <div id="app">
    <ImageGallery />
  </div>
</template>

<script setup>
import ImageGallery from './components/ImageGallery.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>