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格式,以上内容仅供参考,一切以具体业务需求为主!
相关推荐
leobertlan4 小时前
2025年终总结
前端·后端·程序员
子兮曰4 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
Howrun7774 小时前
VSCode烦人的远程交互UI讲解
ide·vue.js·vscode
百锦再5 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君5 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再5 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI5 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
颜酱6 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
失忆爆表症7 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录7 小时前
Vuex 与 pinia
前端·javascript·vue.js