vue 图片file转blob

在Vue.js中，如果你想要将用户上传的图片文件转换成Blob对象，可以按照以下步骤操作：

1. 使用`@input`事件监听文件上传：首先，在表单元素上绑定`@input`事件，当用户选择文件时触发。

<input type="file" @input="handleFileInput" />

2. 编写处理函数：创建一个名为`handleFileInput`的方法来接收上传的文件，并将其转换成Blob。

export default {
  methods: {
    handleFileInput(e) {
      const file = e.target.files[0]; // 获取选中的第一个文件
      if (file) {
        const reader = new FileReader(); // 创建FileReader实例
        reader.readAsDataURL(file); // 读取文件内容并转换为data URL

        reader.onload = function (event) {
          const blob = atob(event.target.result.split(',')[1]); // 提取data URL中的base64数据
          this.myBlob = window.btoa(blob); // 转换回Blob对象
        };
      }
    },
  },
};

在这个例子中，我们先创建了一个FileReader实例，然后通过`readAsDataURL`方法读取文件，加载完成之后，从data URL中提取出base64编码的数据，再用`window.btoa`将其转换回Blob对象。