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格式,以上内容仅供参考,一切以具体业务需求为主!
相关推荐
沉登c9 分钟前
Javascript客户端时间与服务器时间
服务器·javascript
持久的棒棒君11 分钟前
ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能
前端·javascript·elementui
2401_8572979122 分钟前
秋招内推2025-招联金融
java·前端·算法·金融·求职招聘
一 乐27 分钟前
租拼车平台|小区租拼车管理|基于java的小区租拼车管理信息系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·微信·notepad++·拼车
undefined&&懒洋洋1 小时前
Web和UE5像素流送、通信教程
前端·ue5
大前端爱好者3 小时前
React 19 新特性详解
前端
小程xy3 小时前
react 知识点汇总(非常全面)
前端·javascript·react.js
随云6323 小时前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
随云6323 小时前
WebGL编程指南之进入三维世界
前端·webgl
寻找09之夏4 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js