【前端笔记】js将图片文件转换为base64字符串

最新推荐文章于 2024-10-08 16:28:31 发布

bg2015

最新推荐文章于 2024-10-08 16:28:31 发布

阅读量1.2k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/hl20031230/article/details/130097856

版权

该文章描述了一个前端将图片文件转换为BASE64字符串的异步方法，适用于JSON请求。通过FileReaderAPI读取图片并转换为dataURL，然后在成功或失败回调中处理结果。由于图片大小限制和HTTP请求头大小限制，通常图片应在200KB以内。

摘要由CSDN通过智能技术生成

需求场景：前端页面input上传的图片文件，后端服务接收的是json请求，需要将图片文件转换成普通字符串，再通过json格式送给后端

注意图片文件不宜过大，一般200KB以内，因为BASE64后体积会增加约33%，一般浏览器和网关、Nginx服务器对http请求报文大小都有限制。

代码实现，建议放在常用工具类里：

/**
  *图片文件转换成BASE64字符串，异步任务
  *@param {File} file图片文件对象
  *@return {String} BASE64字符串，格式'data:image/jpeg;base64,XXX'，期中'jpeg'为图片的格式，'XXX'为BASE64字符串内容，转换失败则返回空字符串
  */
export function convertFileToBase64Str(file) {
    // 因为转换是耗时的，用异步任务实现
    return new Promise((resovel, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        // 加载成功
        reader.onload = function() {
            resolve(reader.result)
        }
        // 加载失败
        reader.onerror = function(error) {
        	// reject(error)
            resolve('')    
        }
    })
}