Vue에서 업로드된 파일의 내용을 읽고 base64 인코딩으로 변환한 후 백엔드 인터페이스에 전달합니다.

간혹 업로드된 파일을 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: Failed to execute 'btoa' on 'Window': The string to be encoding contains characters outside of the Latin1 range. It is not an useable base64 content.

따라서 위의 접두사를 교체해야 합니다.