el-upload上传读取文件内容

在使用 el-upload 组件读取文件内容时，你可以通过监听 before-upload 钩子函数来实现。以下是一个简单的例子，展示了如何在文件上传前读取文件内容：

<template>
  <el-upload
    :before-upload="handleBeforeUpload"
    action="https://jsonplaceholder.typicode.com/posts/"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      const reader = new FileReader();
 
      reader.onload = (e) => {
        console.log('文件内容：', e.target.result);
        // 在这里你可以处理文件内容，例如验证格式等
        // 如果验证通过，可以继续上传文件
        // return true;
      };
 
      reader.onerror = (error) => {
        console.error('读取文件出错:', error);
      };
 
      reader.readAsText(file); // 根据需要可以读取其他格式，如 ArrayBuffer
 
      // 通常情况下，你需要返回一个 false 来停止默认的上传行为
      return false;
    },
  },
};
</script>

在这个例子中，我们定义了一个 handleBeforeUpload 方法，该方法会在用户选择文件时触发。我们使用 FileReader 对象来异步读取文件内容，然后在 onload 事件中处理文件内容。你可以在这里添加任何你需要的文件处理逻辑。最后，由于我们已经读取了文件内容并处理它，通常应该返回 false 来阻止 el-upload 的默认上传行为。