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 encoded contains characters outside of the Latin1 range. 不是可以用的base64内容

所以需要将上述前缀替换掉。 

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...