使用el-upload

`el-upload`是Element UI库中的一个强大的文件上传组件，用于处理用户的文件上传操作。它提供了丰富的配置选项以及易于使用的API，支持多种上传方式如点击、拖拽等。下面是使用`el-upload`的基本步骤：

1. 引入依赖：
在`main.js`或相关模块中导入`element-ui`及`el-upload`组件：

   import ElementUI from 'element-ui';
   import '@element-ui/lib/theme-chalk/index.css'; // 引入主题样式
   Vue.use(ElementUI);

2. 在模板中使用`el-upload`组件：

   <el-upload
     action="/api/upload"
     :auto-upload="false" // 需要手动触发上传
     :on-change="handleChange" // 文件变化时的回调
     :on-success="handleSuccess" // 上传成功后的回调
     :before-upload="beforeUpload" // 上传前的钩子，可以校验文件大小、格式等
   >
     <!-- 上传按钮或区域 -->
     <i class="el-icon-upload"></i>
   </el-upload>

3. 定义组件方法：
- `handleChange`: 当文件发生变化时，比如选择了新的文件，会被调用。
- `handleSuccess(response, file)` 或 `handleError(err, file)`: 分别处理上传成功的响应数据和错误信息。
- `beforeUpload(file)`: 这里可以检查文件是否满足上传条件，例如大小限制。

示例代码片段：

export default {
  methods: {
    handleChange(file) {
      console.log(`开始上传 ${file.name}`);
    },
    handleSuccess(response, file) {
      console.log(`文件 ${file.name} 上传成功，服务器返回 ${response}`);
    },
    beforeUpload(file) {
      const sizeLimit = 5 * 1024 * 1024; // 5MB
      if (file.size > sizeLimit) {
        alert('文件过大，请选择小于5MB的文件');
        return false;
      }
      return true;
    },
  },
};