el-upload通过:file-list将文件传给后端

`el-upload` 是 Element UI 提供的一个基于 Web 的文件上传组件，它允许用户方便地选择并上传文件到服务器。当用户完成文件选择后，`el-upload` 使用 `file-list` 属性来存储选中的文件信息，包括文件名、大小等数据。

当你想把文件列表传给后端服务器时，通常会涉及到一个发送请求的过程。在`el-upload` 的 `on-success` 或者 `on-change` 事件处理器中，你可以处理这个上传操作。例如：

<template>
  <el-upload
    :action="uploadUrl" // 替换为你的实际上传接口URL
    list-type="text"
    :file-list="fileList"
    @change="handleFileChange"
    @success="handleSuccess"
  >
    <i class="el-icon-plus"></i>
    <div slot="tip">点击上传</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-backend-api/upload', // 你的后端接收文件的API地址
      fileList: [], // 用于存放文件信息的对象数组
    };
  },
  methods: {
    handleFileChange(file) {
      this.fileList.push(file);
    },
    
    // 当上传成功时调用此函数
    handleSuccess(response, file) {
      const formData = new FormData();
      formData.append('files[]', file); // 将file对象添加到FormData
      axios.post(this.uploadUrl, formData).then(res => {
        // 后端返回的响应在这里处理，比如更新状态等
        console.log(res.data);
      });
    },
  },
};
</script>

在这个例子中，`handleSuccess` 函数会创建一个 `FormData` 对象，并将文件对象附加到其中，然后通过 Axios 发送 POST 请求。后端接收到文件后可以根据需要进行相应的处理。