使用Vue3构建一个图像画廊，支持图片上传

在现代网页开发中，图像画廊一直是一个受欢迎的功能。它不仅可以展示图片，还能为用户提供友好的互动体验。在这篇文章中，我们将使用Vue3构建一个简单的图像画廊，并实现图片上传功能。我们将使用Vue3的Composition API，特别是setup语法糖，使我们的代码更加简洁和易于维护。

项目准备

在开始之前，我们需要一个基本的Vue3项目。你可以使用Vue CLI或者直接使用Vite快速创建一个新的Vue3项目。以下是使用Vite创建Vue3项目的步骤：

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

启动项目后，在浏览器中访问 http://localhost:3000，你将看到一个空白页面。

设计画廊组件

我们的画廊将包括三个主要部分：

1. 图片上传区
2. 图片预览区
3. 图片画廊展示区

我们来创建一个名为 ImageGallery.vue 的组件，在该组件中实现上述功能。

创建 ImageGallery.vue

在 src/components 目录下，创建一个新的文件 ImageGallery.vue，并添加以下代码：

<template>
  <div class="image-gallery">
    <h1>图像画廊</h1>
    <div>
      <input type="file" @change="onFileChange" accept="image/*" multiple />
    </div>
    <div class="preview-container">
      <h2>预览</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>没有图像可预览</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) {
        // 图片加载完成后更新状态
        images.value = imageUrls;
      }
    };

    reader.readAsDataURL(file);
  }
};

const uploadImages = () => {
  uploadedImages.value = [...uploadedImages.value, ...images.value];
  images.value = []; // 清空预览
};
</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>

代码解读

1. 模板部分 (<template>):

   • 我们使用一个文件输入框来允许用户上传图片。
   • 预览区用来展示用户正在上传的图片。
   • 画廊展示区用来展示用户已成功上传的图片。

2. 逻辑部分 (<script setup>)：

   • 我们定义了两个响应式数据 images 和 uploadedImages，分别用于存储用户预览的图片和已经上传到画廊的图片。
   • onFileChange 函数处理文件选择的事件，使用 FileReader API 将用户选择的文件转换为数据URL并更新预览数据。
   • uploadImages 函数将预览的图片添加到画廊展示，随后清空预览。

3. 样式部分 (<style scoped>)：

   • 这里简单地定义了一些样式，以确保画廊的布局整洁。

将组件添加到主应用中

接下来，我们需要在主应用中引入这个组件。打开 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>

运行应用

到此为止，你已经完成了一个简单的图像画廊。去终端中运行以下命令以启动项目：

npm run dev

在浏览器中打开 http://localhost:3000，你应该能看到图像画廊的界面。上传一些图片后，你会看到预览图和画廊展示。

进一步改进

你可以进一步扩展这个项目，比如：

• 添加图片删除功能。
• 使用第三方库来优化图片处理和上传。
• 进行响应式设计，使画廊在不同屏幕上表现良好。
• 将上传的图片保存在后端数据库中，并实现图片的持久化。

总结

在本教程中，我们使用Vue3构建了一个简单的图像画廊，支持图片上传功能。通过使用Composition API中的setup语法糖，我们使代码更加结构化和易于维护

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作