引言

1. 项目准备：通过Vite快速创建Vue3项目

首先，我们需要创建一个新的Vue3项目。Vite是一个轻量级的构建工具，能够快速启动和构建Vue项目。

npm init vite@latest my-gallery -- --template vue
cd my-gallery
npm install

以上命令将创建一个名为my-gallery的Vue3项目，并安装所需的依赖。

2. 设计画廊组件：结构化组件设计

我们的画廊组件将包含三个主要部分：

  • 图片上传区：用户可以在此区域上传图片。
  • 图片预览区：上传的图片将在此区域显示预览。
  • 图片画廊展示区：所有上传的图片将在此区域以画廊形式展示。

2.1 创建组件结构

在src/components目录下创建一个名为ImageGallery.vue的文件，并定义基本的组件结构：

<template>
  <div class="image-gallery">
    <div class="upload-area">
      <input type="file" @change="handleUpload" multiple />
    </div>
    <div class="preview-area">
      <div v-for="(image, index) in imageList" :key="index" class="preview-item">
        <img :src="image" alt="preview" />
        <button @click="removeImage(index)">Remove</button>
      </div>
    </div>
    <div class="gallery-area">
      <div v-for="(image, index) in imageList" :key="index" class="gallery-item">
        <img :src="image" alt="gallery" />
      </div>
    </div>
  </div>
</template>

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

const imageList = ref([]);

const handleUpload = (event) => {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imageList.value.push(e.target.result);
    };
    reader.readAsDataURL(files[i]);
  }
};

const removeImage = (index) => {
  imageList.value.splice(index, 1);
};
</script>

<style scoped>
.image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-area {
  margin: 20px;
}
.preview-area, .gallery-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.preview-item, .gallery-item {
  margin: 10px;
}
img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>

3. 代码解读：模板、逻辑和样式

3.1 模板部分

  • 上传区：使用<input type="file">元素允许用户选择多个文件，并通过@change事件触发上传逻辑。
  • 预览区：使用v-for指令循环显示imageList中的图片，并提供一个删除按钮。
  • 画廊展示区：同样使用v-for指令展示所有图片。

3.2 逻辑部分

  • handleUpload：处理文件上传，使用FileReader将文件转换为Base字符串，并添加到imageList中。
  • removeImage：根据索引删除imageList中的图片。

3.3 样式部分

  • 使用Flexbox布局实现响应式设计，确保在不同屏幕尺寸下都能良好展示。

4. 将组件添加到主应用中

在src/App.vue中引入并使用ImageGallery组件：

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

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

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

5. 运行应用：使用npm命令启动项目

在项目根目录下运行以下命令启动项目：

npm run dev

6. 进一步改进：扩展功能与优化

6.1 添加删除功能

已经在预览区实现了删除功能，可以进一步优化用户体验，例如添加确认删除的弹窗。

6.2 优化图片处理

6.3 响应式设计

通过媒体查询和Flexbox布局，确保组件在不同设备上都能良好展示。

6.4 持久化存储

7. 总结

最后，如果你对Vue3有更多兴趣，欢迎阅读我的全新著作《Vue3从零基础到项目开发》，深入探索Vue3的更多精彩内容。