element ui upload 手动上传文件，传多个参数

在Element UI的<el-upload>组件中，您可以通过before-upload钩子函数来手动上传文件，并且可以传递多个参数。以下是一个简单的例子：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :headers="headers"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'your-upload-url', // 上传的API地址
      headers: { // 需要设置的HTTP头部
        'Authorization': 'Bearer your-token'
      },
      file: null, // 用于存储手动选择的文件
    };
  },
  methods: {
    handleBeforeUpload(file) {
      // 存储文件以便后续手动上传
      this.file = file;
      // 返回false阻止自动上传
      return false;
    },
    submitUpload() {
      // 创建FormData
      const formData = new FormData();
      formData.append('file', this.file); // 添加文件
      // 添加其他参数
      formData.append('param1', 'value1');
      formData.append('param2', 'value2');
      // 使用axios进行手动上传
      this.axios({
        method: 'post',
        url: this.uploadUrl,
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
          ...this.headers
        }
      }).then(response => {
        console.log('上传成功', response);
      }).catch(error => {
        console.error('上传失败', error);
      });
    },
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功', response);
    }
  }
};
</script>

在这个例子中，我们使用了:before-upload属性来指定一个方法，该方法会在文件选择时触发，但不会自动上传文件。我们存储了选择的文件，并通过一个按钮触发submitUpload方法来手动上传文件，同时附带了额外的参数。我们使用FormData来构建包含文件和参数的请求体，然后使用axios发送请求。

请确保您已经安装并导入了axios，并根据您的实际API地址和参数调整代码。