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

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