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 实现图片路径转成二进制流文件

步骤如下：

1. 在 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>

1. 在 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>

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

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

步骤如下：

1. 在 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>

1. 在 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>

1. 运行项目，上传一张图片后，图片将转变为二进制数据，并 POST 到后端。

以上就是如何实现图片路径转化为二进制文件流的完整攻略和两个示例，希望可以帮助到您。