vue实现图片路径转二进制文件流(binary)

下面是详细的攻略：

如何实现图片路径转换为二进制文件流(binary)？

将图片路径转化为二进制文件流的过程，包括三个步骤：获取图片，读取图片文件二进制，将二进制数据存储起来。下面是具体步骤。

获取图片

获取图片通常需要从 input[type=file] 元素或一个图片 URL。对于 input[type=file] 元素，可通过 onchange 事件获取文件对象。对于图片 URL，可通过创建 img 元素，将图片 URL 赋值为 img.src 并等待图片加载完成。同时需要注意的是，获取图片时需要处理跨域的问题。

读取文件二进制

读取文件二进制通常有两种方式：FileReader API 和 Ajax。FileReader API 提供了如下方法：

// 创建 FileReader 对象
let reader = new FileReader();

// 读取文件
reader.readAsBinaryString(file);

// 监听加载完成事件，完成后获得二进制数据
reader.onload = function() {
    let binary = reader.result;
}

Ajax 通过 XMLHttpRequest 对象访问文件路径：

// 创建 XMLHttpRequest 处理 Ajax 请求
let xhr = new XMLHttpRequest();

// 处理回调函数，获取二进制数据
xhr.onload = function() {
    let binary = xhr.response;
}

// 打开请求
xhr.open('GET', url, true);

// 设置返回类型
xhr.responseType = 'arraybuffer';

// 发送请求
xhr.send();

将二进制数据存储起来

将二进制数据存储起来可以考虑使用 Base64 编码或 Blob 对象。其中 Base64 编码可将二进制数据转化为文本，用于在浏览器中显示图片，或通过 Ajax 发送到服务器。通过创建 Blob 对象可将数据存储为文件并下载，或通过 FormData 发送到服务器。

使用 Base64 编码

使用 Base64 编码的代码示例：

let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function() {
    let binary = btoa(reader.result);
    let src = 'data:image/png;base64,' + binary;
    let img = document.createElement('img');
    img.src = src;
    document.body.appendChild(img);
}

使用 Blob 对象

使用 Blob 对象的代码示例：

let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
    let blob = new Blob([reader.result], {type: file.type});
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = file.name;
    document.body.appendChild(link);
    link.click();
}

两个示例

示例1：使用 Vue 实现图片路径转成二进制流文件

步骤如下：

在 src 目录下新建 components 文件夹，然后新建一个 ImageToBinary.vue 文件。代码如下：

<template>
    <div>
        <input type="file" ref="fileInput" @change="onSelectFile($event)">
        <p><img :src="src"></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            src: ''
        }
    },
    methods: {
        onSelectFile(event) {
            let file = event.target.files[0];
            this.src = '';
            this.readFile(file);
        },
        readFile(file) {
            let reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = this.onLoad;
        },
        onLoad(event) {
            let binary = btoa(event.target.result);
            this.src = 'data:image/png;base64,' + binary;
        }
    }
}
</script>

在 App.vue 文件引入 ImageToBinary.vue 组件。代码如下：

<template>
  <div id="app">
    <ImageToBinary />
  </div>
</template>

<script>
import ImageToBinary from './components/ImageToBinary.vue'

export default {
  name: 'App',
  components: {
    ImageToBinary
  }
}
</script>

运行项目，上传一张图片，即可看到在浏览器中显示出图片，同时打印出二进制数据。

示例2：使用 Axios 将图片路径转成二进制流文件并 POST 到后端

步骤如下：

在 src 目录下新建 components 文件夹，然后新建一个 ImageUpload.vue 文件。代码如下：

<template>
    <div>
        <input type="file" ref="fileInput" @change="onSelectFile($event)">
        <button @click.prevent="uploadImage">上传图片</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            file: null
        }
    },
    methods: {
        onSelectFile(event) {
            this.file = event.target.files[0];
        },
        uploadImage() {
            let reader = new FileReader();
            reader.readAsArrayBuffer(this.file);
            reader.onload = () => {
                let binary = new Uint8Array(reader.result);
                let formData = new FormData();
                formData.append('image', new Blob([binary], {type: this.file.type}), this.file.name);
                axios.post('/api/image/upload', formData)
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
            };
        }
    }
}
</script>

在 App.vue 文件引入 ImageUpload.vue 组件。代码如下：

<template>
  <div id="app">
    <ImageUpload />
  </div>
</template>

<script>
import ImageUpload from './components/ImageUpload.vue'

export default {
  name: 'App',
  components: {
    ImageUpload
  }
}
</script>