el-upload上传功能实现

el-upload 是 ElementUI 提供的一个上传组件，实现上传功能需要以下步骤：

1. 在页面中引入 ElementUI 组件库的样式文件和上传组件。
2. 将 el-upload 组件添加到页面中，并设置相应的属性，如 action（上传地址）、headers（请求头部信息）、name（上传文件的参数名）、accept（接受文件的类型）等。
3. 在上传成功和上传失败的回调函数中处理上传的结果。
4. 可以添加上传前的校验规则，如文件大小、文件类型等。
5. 可以设置多个上传文件的同时上传，设置 limit 属性即可。

示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :headers="{ Authorization: getToken() }"
    :data="{ extraInfo: '其他参数' }"
    :name="'file'"
    :multiple="true"
    :limit="3"
    :accept="'image/png, image/jpeg, image/gif'"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    getToken() {
      // 返回用户的 token，用于验证身份
      return localStorage.getItem('token')
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的结果
      console.log(response, file, fileList)
    },
    handleError(error, file, fileList) {
      // 处理上传失败的结果
      console.log(error, file, fileList)
    },
    beforeUpload(file) {
      // 上传前的校验规则
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG || !isLt2M) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式，且不超过 2MB');
        return false;
      }
      return true;
    }
  }
}
</script>