引言

环境搭建

在开始之前，确保你的开发环境已经配置好。以下是一个基本的 Vue.js 开发环境搭建步骤：

  1. 安装 Node.js 和 npm。
  2. 创建一个新的 Vue.js 项目，使用命令 vue create my-project。
  3. 进入项目目录，使用命令 npm install 安装项目依赖。

Element UI 简介

图片上传与展示

1. 引入 Element UI

在你的 Vue 项目中，首先需要引入 Element UI。在 main.js 文件中，添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 创建上传组件

在你的 Vue 组件中，添加以下代码来创建一个上传组件：

<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 {
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (!isJPG && !isPNG) {
        this.$message.error('只能上传 JPG/PNG 文件!');
      }
      return isJPG || isPNG;
    }
  }
};
</script>

3. 使用组件

<template>
  <div>
    <my-upload-component></my-upload-component>
  </div>
</template>

<script>
import MyUploadComponent from './components/MyUploadComponent.vue';

export default {
  components: {
    MyUploadComponent
  }
};
</script>

总结