1. 项目简介

2. 技术栈

  • Vue.js：用于构建用户界面的渐进式JavaScript框架。
  • Vue Router：Vue.js的官方路由管理器。
  • Vuex：Vue.js的状态管理模式和库。
  • Axios：基于Promise的HTTP客户端，用于在浏览器和node.js中发起HTTP请求。
  • Element UI：一套基于Vue 2.0的桌面端组件库。

3. 项目搭建

3.1 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create vue-image-gallery

3.2 安装依赖

安装Vue Router、Vuex、Axios和Element UI：

npm install vue-router vuex axios element-ui --save

3.3 配置路由和Vuex

在src/router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});

在src/store/index.js中配置Vuex：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    images: []
  },
  mutations: {
    setImages(state, payload) {
      state.images = payload;
    }
  },
  actions: {
    fetchImages({ commit }, payload) {
      // 模拟从服务器获取图片数据
      commit('setImages', payload);
    }
  }
});

4. 图片上传与展示

4.1 图片上传组件

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="preview" />
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: ''
    };
  },
  methods: {
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      return isJPG;
    }
  }
};
</script>

4.2 图片展示组件

<template>
  <div class="image-gallery">
    <el-card
      v-for="(image, index) in images"
      :key="index"
      :body-style="{ padding: '0px' }"
    >
      <img :src="image.url" class="image" />
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    images: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.image {
  width: 100%;
  height: auto;
}
</style>

4.3 主页面

”`html 

<image-upload @upload="handleUpload"></image-upload>
<image-gallery :images="images"></image-gallery>