vue el-upload实现上传文件到后台的功能

`el-upload` 是 `ElementUI` 组件库中的一个组件，用于实现文件上传功能。它支持多文件上传、拖拽上传等功能，使用起来非常方便。以下是一个简单的示例：

<template>
  <div>
    <el-upload
      action="/api/upload"
      :data="{token: 'xxxxx'}"
      :on-success="handleSuccess"
      :on-error="handleError"
      :multiple="true"
      :limit="3"
      :accept="'image/*'"
      ref="upload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3个文件</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
    },
    handleError(error, file, fileList) {
      console.log(error)
      console.log(file)
      console.log(fileList)
    }
  }
}
</script>

上面的代码中，我们将 `el-upload` 组件的 `action` 属性设置为上传文件的后端接口地址，`data` 属性设置为上传时需要携带的参数，`on-success` 和 `on-error` 属性分别绑定了上传成功和上传失败的回调函数。`multiple` 属性表示是否支持多文件上传，`limit` 属性表示最多上传的文件数，`accept` 属性表示接受的文件类型。我们还使用了 `ref` 属性来获取到 `el-upload` 组件的引用，方便在其他方法中操作上传组件。

在上面的示例中，我们定义了 `handleSuccess` 和 `handleError` 两个方法来处理上传成功和上传失败的情况。在上传成功时，我们可以通过 `response` 参数获取到服务器返回的数据，`file` 参数表示当前上传的文件，`fileList` 参数表示当前已经上传的文件列表。在上传失败时，我们可以通过 `error` 参数获取到错误信息。

需要注意的是，以上示例只是前端实现上传文件的功能，你还需要在后端编写相应的代码来处理上传请求，将上传的文件保存到服务器上。