el-upload 自定义上传

如果你想要使用 el-upload 组件来进行自定义上传，可以按照以下步骤进行操作：

1. 设置 el-upload 组件的 action 属性为一个无效的地址，例如：`action: '/invalid'`。

2. 在 el-upload 组件上监听 change 事件，获取上传的文件列表。

3. 使用 FormData 对象来构建上传的数据，可以通过 append 方法向其中添加文件。

4. 使用 axios 或类似的库发送 POST 请求，将 FormData 数据上传到后端。

下面是一个简单的示例代码：

<el-upload
  class="upload-demo"
  action="/invalid"
  :on-change="handleChange"
  :before-upload="handleBeforeUpload"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

data() {
  return {
    fileList: [],
  };
},
methods: {
  handleChange(file, fileList) {
    // 上传文件列表发生变化时触发
    this.fileList = fileList;
  },
  handleBeforeUpload(file) {
    // 返回 false 可以取消上传
    const formData = new FormData();
    formData.append('file', file);
    axios.post('/api/upload', formData).then((response) => {
      console.log(response);
    });
    return false;
  },
}

在上面的代码中，我们通过监听 el-upload 组件的 change 事件来获取上传的文件列表，然后在 before-upload 事件中使用 FormData 对象来构建上传的数据，并通过 axios 发送 POST 请求将数据上传到后端。