Vue将File二进制文件转换为base64格式

以下是一个完整的Vue示例代码,其中包含了将File转换为base64的功能:

javascript 复制代码
<template>
  <div>
    <!-- 上传文件的input元素 -->
    <input type="file" @change="handleFileChange" />
    <!-- 显示base64格式的文件内容 -->
    <div v-if="base64Data">
      <p>Base64 Data:</p>
      <pre>{{ base64Data }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Data: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 创建FileReader对象
        const reader = new FileReader();
        // 读取文件内容
        reader.readAsDataURL(file);
        // 当文件读取完成时的回调函数
        reader.onload = () => {
          // 将文件内容转换为base64格式
          this.base64Data = reader.result;
        };
      }
    }
  }
};
</script>

<style></style>
这个示例通过手动选取图片文件,当确认选择后会触发handleFileChange方法来处理文件并将其转换为base64格式,以上内容仅供参考,一切以具体业务需求为主!
相关推荐
丷丩10 小时前
MapLibre GL JS第25课:添加栅格瓦片源
开发语言·javascript·gis·mapbox·maplibre gl js
半个落月11 小时前
彻底搞懂 JavaScript 变量提升(Hoisting)—— 从现象到底层原理
前端·javascript
零度晚风11 小时前
React 底层原理 & 新特性
前端
用户618482402195111 小时前
我受够了 Electron 的 IPC 样板代码,于是写了 electron-ipc-auto-import
前端
梦想的颜色11 小时前
TypeScript 完全指南(中):函数、接口、类与高级类型
前端·typescript
鹏多多11 小时前
OpenSpec+SDD规范驱动AI Agent开发项目实战指南
前端·vue.js·react.js
叶小树咯11 小时前
React 为什么不能像 Vue 那样 state.count++
前端·react.js
ricardo197311 小时前
防抖节流进阶 + requestAnimationFrame:滚动与输入场景的性能优化
前端·面试
wjj不想说话11 小时前
你项目里的 Pinia,可能已经成了第二个 localStorage
前端·vue.js
wuhen_n11 小时前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·langchain·ai编程