使用ElementUI实现图片预览的详细教程

随着互联网时代的到来，图片成为了人们生活中重要的一部分。在网站和应用程序中，图片预览功能更是必不可少。在Vue.js框架中，ElementUI是一个比较成熟的组件库，其中包含了丰富的组件和工具，也包括图片预览功能。本文将详细介绍如何在Vue.js中使用ElementUI来实现图片预览。

一、安装ElementUI

首先，我们需要将ElementUI添加到我们的项目中。我们可以使用npm命令来安装它。

npm i element-ui -S

如果你使用的是VueCLI 3.x来创建项目，你可以使用VueCLI提供的插件快速安装ElementUI：

vue add element

这一步完成后，我们需要在Vue项目的入口文件main.js中引入和使用ElementUI。

// 引入ElementUI的CSS和JS文件
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

二、使用el-upload组件

要实现图片预览的功能，我们需要使用ElementUI的el-upload组件。el-upload组件是一个上传文件的组件，可以让用户将本地的文件上传到服务器。在本例中，我们需要使用el-upload的文件列表显示和文件预览功能。首先，我们需要在Vue文件中定义一个data属性，用于保存上传的文件列表：

data() {
  return {
    fileList: []
  }
}

接下来，在Vue模板中添加el-upload组件，并设置相关属性：

<el-upload
  class="upload-demo"
  action="//jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  multiple
  :auto-upload="false"
  list-type="picture"
  :on-preview="handlePicturePreview"
  :on-remove="handleRemove"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <span slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过500kb</span>
</el-upload>

在上述代码中，我们设置了el-upload的一些属性，如action设置为“//jsonplaceholder.typicode.com/posts/”（假的接口地址），file-list保存上传的文件列表，multiple表示可以上传多个文件，auto-upload设置为false表示不自动上传文件，list-type设置为“picture”表示文件列表的显示形式为图片，on-preview事件处理函数设置为handlePicturePreview，on-remove事件处理函数设置为handleRemove。接下来，我们需要为handlePicturePreview和handleRemove事件处理函数添加代码：

methods: {
  handlePicturePreview(file) {
    this.$preview(file.url, '预览');
  },
  handleRemove(file, fileList) {
    console.log(file, fileList);
  }
}

在handlePicturePreview事件处理函数中，我们调用了Vue.prototype.$preview方法，这个方法是ElementUI提供的一个用于预览图片的方法。该方法有两个参数，第一个参数为图片URL，第二个参数为弹出窗口的标题。在handleRemove事件处理函数中，我们可以在控制台中看到上传的文件信息。

三、完整代码示例

下面是完整的Vue单文件组件的代码示例：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :file-list="fileList"
    multiple
    :auto-upload="false"
    list-type="picture"
    :on-preview="handlePicturePreview"
    :on-remove="handleRemove"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <span slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过500kb</span>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handlePicturePreview(file) {
      this.$preview(file.url, '预览');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
}
</script>

通过这个简单的例子，我们可以看到ElementUI提供了非常简单易用的el-upload组件，在Vue.js中实现图片预览功能十分方便。