vue 上传文件 el-upload

为了在Vue中实现文件上传功能，你可以使用Element UI中的el-upload组件。这个组件可以让用户选择文件并将其上传到指定的服务器。

下面是一个简单的示例代码，演示如何在Vue中使用el-upload组件：

<template>
  <div>
    <el-upload
      action="/upload"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
    >
      <el-button>点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 添加一些文件上传前的逻辑，例如限制文件类型和大小等
      console.log('beforeUpload:', file);
    },
    onSuccess(response, file) {
      // 文件上传成功后的逻辑
      console.log('onSuccess:', response, file);
    },
    onError(error, file) {
      // 文件上传失败后的逻辑
      console.log('onError:', error, file);
    }
  }
};
</script>

在上面的代码中，el-upload组件有几个重要的属性和事件：

- `action`属性指定了文件上传的接口地址。
- `before-upload`事件会在文件上传之前触发，你可以在这里添加一些文件上传前的逻辑。
- `on-success`事件会在文件上传成功后触发，你可以在这里处理上传成功后的逻辑。
- `on-error`事件会在文件上传失败后触发，你可以在这里处理上传失败后的逻辑。

请根据你的具体需求修改上面的代码，并在你的Vue项目中使用el-upload组件来实现文件上传功能。