To convert a file to a Base64 string, you can use the FileReader object to read the file and use its readAsDataURL method to convert the file to Base64 encoding. Here is an example code on how to convert a file to Base64 in the Element UI el-upload component:
<template>
<el-upload
action="/your-upload-url"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
>
<el-button slot="trigger">Select File</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleBeforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
// Convert the file to a Base64 string
const base64String = event.target.result;
// You can process or save the Base64 string here
console.log(base64String);
resolve(file);
};
reader.onerror = (error) => {
console.error('File read error:', error);
reject(error);
};
reader.readAsDataURL(file);
});
},
handleSuccess(response, file) {
// Handle the upload success
},
},
};
</script>
In the above code, we use the handleBeforeUpload method to handle pre-upload operations. In this method, we create a FileReader object and set its onload event handler. When the FileReader finishes reading the file, the onload event is triggered, and we can obtain the Base64 encoded string of the file.
In the onload event handler, we print the Base64 string of the file to the console, and you can process or save the Base64 string here.
Please note that the /your-upload-url in the example is for demonstration purposes, and you need to replace it with the actual file upload API URL. You can also adjust and extend it according to your needs, such as adding file type validation, file size restrictions, etc.
This way, when the user selects a file, the el-upload component will trigger the handleBeforeUpload method to convert the file to Base64 encoding before uploading, and print the Base64 string to the console. You can perform further processing based on your actual needs.