前端如何使用element ui 上传多个文件转为数据流到后端

使用 Element UI 的 Upload 组件上传多个文件后，可以通过以下步骤将文件转换为数据流并发送到后端：

1. 获取上传文件列表

在 Upload 组件中，可以通过 `file-list` 属性获取上传的文件列表，该属性值为一个数组，数组中每个元素都是一个包含上传文件信息的对象。

<el-upload ref="upload" :file-list="fileList">
  <el-button slot="trigger">选择文件</el-button>
  <el-button slot="upload">上传文件</el-button>
</el-upload>

data() {
  return {
    fileList: [],
  }
},
methods: {
  handleUpload() {
    // 获取上传文件列表
    const files = this.fileList.map(file => file.raw)
    // 转换文件为数据流
    const data = new FormData()
    files.forEach(file => data.append('file', file))
    // 发送数据流到后端
    axios.post('/api/upload', data)
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

2. 转换文件为数据流

将文件转换为数据流，可以使用 HTML5 中的 FormData 对象，将每个文件添加到 FormData 实例中，然后发送到后端。

// 转换文件为数据流
const data = new FormData()
files.forEach(file => data.append('file', file))

3. 发送数据流到后端

使用 axios 等 HTTP 请求库，将数据流以 POST 请求方式发送到后端。

axios.post('/api/upload', data)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在后端接口中，可以使用 multer 等文件上传中间件，解析 FormData 中的文件数据流，并保存到服务器中。