Vue3 ElementPlus上传组件中的文件预览功能

# 1. 简介

- Vue3和ElementPlus简介
- 文件上传在Web开发中的重要性

# 2. Vue3中集成ElementPlus上传组件

在本章中，我们将介绍如何在 Vue3 项目中集成 ElementPlus 的上传组件，为实现文件上传和预览功能奠定基础。接下来将分为以下几个步骤来实现。

### 安装ElementPlus

首先，我们需要通过 npm 或 yarn 安装 ElementPlus。在项目根目录下执行以下命令：

npm install element-plus --save
# 或
yarn add element-plus

### 创建Vue3项目

如果还没有 Vue3 项目，可以通过 Vue CLI 快速创建一个：

npm install -g @vue/cli
vue create vue3-elementplus-upload
cd vue3-elementplus-upload

### 导入和配置ElementPlus上传组件

在 main.js 中导入 ElementPlus 的样式和组件，并注册到 Vue 实例中：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

通过以上步骤，我们成功集成了 ElementPlus 的上传组件，为后续的文件上传和预览功能做好准备。接下来，我们将实现基本的文件上传功能。

# 3. 实现基本的文件上传功能

在这一部分，我们将介绍如何在Vue3和ElementPlus中实现基本的文件上传功能。首先，我们需要创建一个上传组件，并设置相关的配置，然后处理上传成功和失败的情况。

#### 创建上传组件

在Vue3项目中，我们首先需要创建一个文件上传的组件。可以使用`el-upload`组件来实现文件的上传。

<template>
  <el-upload
    class="upload-demo"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.error('文件上传失败', err, file, fileList);
    },
    beforeUpload(file) {
      console.log('准备上传文件', file);
      return true;
    }
  }
}
</script>

<style>
.upload-demo {
  margin-top: 20px;
}
</style>

#### 设置文件上传的相关配置

在上面的代码中，我们配置了上传组件的`action`、`on-success`、`