前端FileReader对象实现图片file文件转base64(前端file对象)

编辑：rootadmin

前端FileReader对象实现图片file文件转base64 1、file转base64具体代码// 图片file转base64方法（file文件，回调函数） fileToBase64(file, callback) { // 创建FileReader对象（不兼容IE） let reader = new FileReader(); // 将file转为base64 （异步操作） reader.readAsDataURL(file); // 转换成功 reader.onload = () => { const response = { status: true, data: reader.result } callback(response); }; // 转换失败 reader.onerror = function () { const response = { status: false, data: reader.error } callback(response); }; }// 调用方法fileToBase64(imgFile, (res) => { if(res.status) { console.log('file转化成base64成功---',res.data) } else { console.log('file转化base64失败---',res.data) }})2、原理解析

推荐整理分享前端FileReader对象实现图片file文件转base64(前端file对象)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端file对象,前端no such file or directory,前端 formdata,前端读取文件内容,前端读取文件内容,前端读取文件内容,前端读取文件内容,前端file对象,内容如对您有帮助，希望把文章链接给更多的朋友！

上面封装的方法，其原理主要是借助FileReader对象来实现图片格式的转换，FileReader对象中的readAsDataURL()方法，可以读取一个File或Blob类型的文件，并将其转换为base64格式的字符串。但要注意的一点是：我们通过readAsDataURL()方法去读取一个文件时，属于异步操作，因此我们需要在FileReader对象的onload事件或onerror事件中，通过回调函数的方式，将文件类型转换的结果，传递给方法的调用者。

还有最重要的一点：该方法不兼容IE。

3、FileReader对象

FileReader对象可以异步的读取用户计算机上文件，但仅限于以安全的方式（通过<input>、DataTransfer等方式获取文件后），读取对应的File或Blob类型的文件，并不能按照文件路径去用户的存储的读取对应文件。

浏览器兼容性：

① 创建FileReader对象的方法只有一种，那就是构造函数：// 创建FileReader对象let reader = new FileReader();② 常用属性

error：表示当读取文件发生错误时，返回的错误信息。