element-ui上传文件 + 携带参数案例

在使用Element UI的<el-upload>组件上传文件的同时，你可以通过data属性来携带额外的参数。以下是一个简单的例子，展示了如何在上传文件时携带额外的参数：

<template>
  <el-upload
    class="upload-demo"
    drag
    action="http://example.com/upload"
    :data="additionalData"
    :on-success="handleSuccess"
    :on-error="handleError">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      additionalData: {
        // 这里填写你需要传递的额外参数
        key1: 'value1',
        key2: 'value2'
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 成功回调
      console.log('Upload success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      // 错误回调
      console.error('Upload failed:', err, file, fileList);
    }
  }
};
</script>

在这个例子中，additionalData对象包含了你想要传递的额外参数。当用户进行文件上传操作时，这些额外的参数将与文件一起发送到服务器。注意action属性应设置为你的服务器接收上传文件的URL。成功上传后，你可以在handleSuccess方法中处理响应。如果上传失败，则在handleError方法中处理错误。