場合によっては、アップロードされたファイルを Base64 エンコードに変換してバックエンドに渡して使用することが必要になることがありますが、このとき、FileReader オブジェクトを使用してファイルの内容を読み取り、Base64 エンコードに変換して使用します。
FileReader 関数の説明:
//了解原理
let reader = new FileReader()
reader.readAsDataURL(f.files[0]) //把目标文件转地址，文件来自于上传组件。
....读取中
reader.onload = function () { //文件读取成功时触发
myimg.src=reader.result // 如果用于直接展示图片，就可以这样使用
}
1.FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
abort: 中断读取
2.FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发
ただし、ここで注意してください。FileReader によって読み取られた結果は、単なる Base64 エンコードではなく、データ型のプレフィックスが付いているものです。
画像の場合は、data:image/png;base64、このプレフィックスが含まれます。
したがって、バックエンド インターフェイスに渡す場合は、この部分を置き換える必要があります:event!.target.result.split("base64,")[1]
それ以外の場合は、次のエラーが報告されます: Uncaught DOMException: 'Window' で 'btoa' の実行に失敗しました: エンコードされる文字列には Latin1 範囲外の文字が含まれています。使用可能な Base64 コンテンツではありません
したがって、上記の接頭辞を置き換える必要があります。