VUE 二进制文件流方式传递文件

<template>
  <div>
    <el-form :model="form" ref="myForm" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="上传Excel表单">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="httpRequest"
          accept=".pdf, .doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.html"
  
          :before-upload="beforeUpload"
          
        >
          <p><el-button type="primary" size="medium" class="uploadBtn">选择文档</el-button></p>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
        file: null,
      },
    };
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
          // 将文件转换为二进制数据
          const binaryData = event.target.result;
          this.form.file = binaryData;

          // 解析 Promise 以允许上传
          resolve(file);
        };

        reader.onerror = (error) => {
          // 如果有错误，拒绝 Promise
          reject(error);
        };

        // 以二进制形式读取文件
        reader.readAsBinaryString(file);
      });
    },
    changeFile(file, fileList) {
      // 处理文件变更，如果需要的话
    },
    httpRequest() {
      // 在这里实现自定义的 HTTP 请求逻辑
    },
    handleSubmit() {
      // 访问二进制文件数据在 this.form.file 中，并提交表单
      // 在这里实现你的表单提交逻辑
      console.log(this.form);
      return;
    },
  },
};
</script>