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

可以使用element ui的上传组件和JavaScript的FileReader API来实现将文件转换为数据流并发送到后端。

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

HTML部分：

<template>
  <el-upload
    action="/api/upload" //上传文件的后端接口地址
    :on-success="handleUploadSuccess"
  >
    <el-button slot="trigger" type="primary">选择文件</el-button>
  </el-upload>
</template>

JavaScript部分：

<script>
export default {
  methods: {
    handleUploadSuccess(response, file, fileList) {
      const reader = new FileReader();
      reader.readAsDataURL(file.raw); //将文件转换为数据流
      reader.onload = () => {
        const data = {
          filename: file.name,
          filedata: reader.result.split(',')[1], //去掉数据流前缀
        };
        //将数据流发送到后端
        this.$axios.post('/api/uploadData', data).then((res) => {
          console.log(res);
        });
      };
    },
  },
};
</script>

在上面的代码中，我们使用了element ui的上传组件，并且在上传成功后触发了handleUploadSuccess方法。在该方法中，我们使用FileReader API将文件转换为数据流，并将数据流发送到后端的/api/uploadData接口中。

注意，在发送数据流时，我们需要将数据流的前缀（"data:image/jpeg;base64,"）去掉，只发送纯数据部分。

另外，上面的代码中使用了axios库发送POST请求，需要先通过npm安装axios库，并在代码中引入。