vue 把图片转换文件流

在 Vue 中将图片转换为文件流的方法与纯 JavaScript 类似，可以使用 HTML5 中的 File API 和 FormData 对象。具体步骤如下：

1. 在模板中使用 input 元素的 type 属性设置为 file，让用户选择图片文件。

2. 在 Vue 实例中使用 FileReader 对象，将图片文件转换为二进制数据流。

3. 将二进制数据流转换为 Blob 对象，并将其作为 FormData 对象的一个字段，然后将 FormData 对象通过 axios 或 fetch API 发送到后端。

以下是一个使用 axios 将图片文件流传递到后端的示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="upload">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    upload() {
      const reader = new FileReader();

      reader.onload = () => {
        const blob = new Blob([reader.result], { type: this.file.type });
        const formData = new FormData();
        formData.append('image', blob, this.file.name);

        axios.post('/upload', formData).then(response => {
          console.log('上传成功', response.data);
        }).catch(error => {
          console.log('上传失败', error);
        });
      };

      reader.readAsArrayBuffer(this.file);
    }
  }
};
</script>

在上面的示例代码中，首先使用 input 元素让用户选择图片文件，然后使用 FileReader 对象将图片文件转换为二进制数据流。接着，将二进制数据流转换为 Blob 对象，并将其添加到 FormData 对象中。最后，使用 axios 将 FormData 对象发送到后端。

需要注意的是，在使用 axios 或其他 AJAX 库上传文件时，需要将请求头的 Content-Type 设置为 multipart/form-data，以便服务器能够正确解析上传的文件。