vue2二进制文件该

### 如何在 Vue 2 中处理二进制文件

#### 使用 Element UI 的 Upload 组件上传二进制文件

为了实现文件上传功能，在前端开发中通常会选择成熟的UI库中的组件来简化操作。Element UI 提供了一个方便易用的 `upload` 组件，能够满足大多数场景下的文件上传需求。

当使用该组件时，可以通过设置属性来自定义其行为，并利用事件钩子函数捕获用户交互动作。对于监听文件选择这一特定情况而言，应该关注于 `on-change` 或者 `before-upload` 这样的回调机制[^1]：

<template>
  <el-upload action="https://jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload">
    <button>点击上传</button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
      }
      return isLt2M;
    },
  },
};
</script>

这段代码展示了如何通过 `before-upload` 钩子方法验证即将被上传的文件是否符合条件（比如这里限制了最大尺寸）。如果条件不满足，则阻止继续提交；反之则允许正常发送请求给服务器端进行下一步处理。

#### 下载并保存由后端响应返回来的二进制流作为本地文件

除了上传之外，有时也需要接收来自服务端传回的数据——特别是那些以 BLOB 形式存在的资源。BLOB 是一种特殊类型的字段，用来表示大型二进制数据集，例如图片、音频视频片段或者其他任何形式未经压缩编码过的原始字节序列[^2]。

假设现在有一个 API 接口会向客户端传递 PDF 文档或其他形式的内容，那么可以在接收到这些信息之后将其转换成浏览器支持的标准格式以便下载到用户的计算机上：

axios({
  url: 'http://example/api/download',
  method: 'GET',
  responseType: 'blob', // 明确指定期望获取的是什么类型的结果
})
.then((response) => {
  const link = document.createElement('a');
  let blob = new Blob([response.data], { type: 'application/pdf' });
  
  link.href = URL.createObjectURL(blob);
  link.download = "document.pdf"; // 设置默认文件名
  
  document.body.appendChild(link);
  link.click();
});

上述 JavaScript 片段说明了怎样创建临时链接节点并将从网络取得的对象赋值过去，从而触发自动下载过程。注意这里的 MIME 类型应当依据实际应用场景调整为合适的值。