ファイルを Base64 文字列に変換するには、FileReader オブジェクトを使用してファイルを読み取り、その readAsDataURL メソッドを使用してファイルを Base64 エンコードに変換します。以下は、Element UI の el-upload コンポーネントでファイルを Base64 に変換する方法のサンプルコードです：
<template>
<el-upload
action="/your-upload-url"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
>
<el-button slot="trigger">ファイルを選択</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleBeforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
// ファイルをBase64文字列に変換する
const base64String = event.target.result;
// ここでBase64文字列を処理または保存できます
console.log(base64String);
resolve(file);
};
reader.onerror = (error) => {
console.error('ファイルの読み取りエラー:', error);
reject(error);
};
reader.readAsDataURL(file);
});
},
handleSuccess(response, file) {
// アップロード成功後の処理
},
},
};
</script>
上記のコードでは、handleBeforeUpload メソッドを使用してファイルのアップロード前の処理を行っています。このメソッドでは、FileReader オブジェクトを作成し、その onload イベントハンドラを設定しています。FileReader がファイルの読み取りを完了すると、onload イベントがトリガされ、ファイルの Base64 エンコード文字列を取得することができます。
onload イベントハンドラでは、ファイルの Base64 文字列をコンソールに出力し、ここで Base64 文字列を処理または保存することができます。
注意してください、上記の例では /your-upload-url は使用例を示すためのものであり、実際のファイルアップロードの API の URL に置き換える必要があります。同時に、ファイルの種類の検証やファイルサイズの制限など、必要に応じて調整や拡張を行うこともできます。
これにより、ユーザーがファイルを選択すると、el-upload コンポーネントが handleBeforeUpload メソッドをトリガし、ファイルを Base64 エンコードしてコンソールに Base64 文字列を出力します。その後の処理は、実際の要件に応じて行うことができます。