在vue中，文件转base64示例

在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数据属性中，并在模板中显示它。
亲测有效。

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