使用el-upload实现文件上传

el-upload是Element UI中的一个文件上传组件，它可以帮助我们轻松地实现文件上传功能。下面是一个简单的示例，演示如何使用el-upload实现文件上传：

1. 首先需要安装Element UI库并引入相关文件，可以在Vue的入口文件中添加以下代码：

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

Vue.use(ElementUI)

2. 接着在Vue组件中添加el-upload组件，例如：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-error="handleError"
    :limit="1"
    :auto-upload="false"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList
      this.$message.success('上传成功')
    },
    handleError(error, file, fileList) {
      this.fileList = fileList
      this.$message.error('上传失败')
    }
  }
}
</script>

在上面的示例中，el-upload组件有多个属性和事件，其中比较重要的包括：

- action: 上传文件的URL地址。
- on-success: 文件上传成功后的回调函数。
- before-upload: 文件上传前的钩子函数，用于校验文件类型和大小等。
- on-error: 文件上传失败后的回调函数。
- limit: 限制上传文件的数量。
- auto-upload: 是否在选取文件后立即上传。
- file-list: 已上传的文件列表。

通过以上步骤，就可以使用el-upload实现文件上传功能了。