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格式,以上内容仅供参考,一切以具体业务需求为主!
相关推荐
小码哥_常1 分钟前
iPhone 用户传了张 HEIC,我的前端崩了
前端
小码哥_常8 分钟前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋19 分钟前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
鸿蒙开发2 小时前
共享 Schema 与 SchemaFactory
前端·后端·harmonyos
屏什么录2 小时前
录屏超过两小时就卡顿崩盘?从参数调优到代码实现,一文彻底搞定长时间录屏
前端·音视频开发
计算机魔术师2 小时前
950亿怎么拆:Meta给AI基建配的三档弹药
前端
碳基生物猛吃膳食纤维2 小时前
结合DEEPSEEK和CHATGPT弄了个小脚本,批量检查商品主图
前端
绝世唐门三哥2 小时前
CSS 换行三剑客:overflow-wrap、word-break 与 white-space 完全指南
前端·css
程序员初一2 小时前
我把跑了两年 WordPress 的机器重装了一遍,顺便把面板卸了
javascript
kyriewen2 小时前
别再用防抖做懒加载了:120 张图只加载出 4 张
前端·javascript·程序员