要將文件轉換為 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 是示意用法，你需要將其替換為實際的文件上傳介面 URL。同時，還可以根據自己的需求進行調整和擴展，例如添加文件類型驗證、文件大小限制等。
這樣，在使用者選擇文件後，el-upload 組件會觸發 handleBeforeUpload 方法，在文件上傳之前將文件轉換為 Base64 編碼，並在控制台打印出 Base64 字符串。你可以根據實際需求進行後續的處理。