如何使用Vue3构建一个图像画廊(支持图片上传)

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

<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>

<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