在vue中，文件转base64示例

最新推荐文章于 2025-06-05 16:08:55 发布

大佩梨

最新推荐文章于 2025-06-05 16:08:55 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44161385/article/details/135092528

开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用FileReader对象将用户选择的文件转换为Base64编码，提供了一个包含HTML模板和JavaScript方法的详细示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue中，你可以使用FileReader对象将文件转换为Base64编码。以下是一个示例代码，演示了如何将文件转换为Base64编码：

<template>  
  <div>  
    <input type="file" @change="onFileChange">  
    <button @click="convertFileToBase64">转换为Base64</button>  
    <p>{{ base64Data }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      base64Data: '',  
    };  
  },  
  methods: {  
    onFileChange(event) {  
      const file = event.target.files[0];  
      this.convertFileToBase64(file);  
    },  
    convertFileToBase64(file) {  
      const reader = new FileReader();  
      reader.onloadend = () => {  
        this.base64Data = reader.result;  
      };  
      reader.readAsDataURL(file);  
    },  
  },  
};  
</script>

在上面的代码中，我们首先在模板中创建了一个文件输入框和一个按钮。当用户选择文件并点击按钮时，将触发convertFileToBase64方法。该方法使用FileReader对象将文件读取为DataURL，即Base64编码字符串。最后，我们将Base64编码存储在base64Data数据属性中，并在模板中显示它。
亲测有效。

如果对你有帮助的话，可以点点关注点点赞谢谢。