前端头像上传功能实现之base64图片/头像上传详细解析2【扩展知识FileReader对象】

最新推荐文章于 2024-02-19 10:43:06 发布

zhangyizuishuai

最新推荐文章于 2024-02-19 10:43:06 发布

阅读量685

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/108521913

版权

node.js 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

将图片变成base64字符串
base64是一种数据格式就是一个字符串可以当图片来使用

// base64之将图片在前端变为base64格式

1.先获取图片
2.FileReader对象将图片进行转换（转成base64格式）
屁话不多说强行上代码看官勿笑

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <button id="cs">上传</button>
    <img src="" alt="" id="x">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    // base64将图片变成base64字符串
    // base64是一种数据格式 就是一个字符串可以当图片来使用
    // base64之将图片在前端变为base64格式
    // 1.先获取图片
    // 2.FileReader对象将图片进行转换
    cs.onclick = function () {
        var file = document.querySelector("#file").files[0]
        console.log(file);
        // 内置构造函数的方式创建一个FileReader对象
        var fileReader = new FileReader()
        console.log("fileReader→",fileReader);
        // fileReader.readAsDataURL(file)这个方法是把列表清单里面的信息转化成base64,参数为file是列表清单信息
        fileReader.readAsDataURL(file)
        // fileReader.onload事件是等fileReader.readAsDataURL(file)转化为base64结束后监听的一个异步的回调函数
        fileReader.onload = function () {
            // 异步回调函数当中,fileReader.result就是转化后的base64字符,可以直接用在img标签的src属性上
            console.log("图片转化完毕！");
            // 其中内部的fileReader.result可以换成this(this指向问题)
            console.log("转换结果！",fileReader.result);
            $("#x").attr("src",fileReader.result)
        }
    }
</script>

</html>

FileReader
FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
创建实例
var reader = new FileReader();
在这里插入图片描述

二进制数据上传
HTML5体系的建立引入了一大堆新的东西，基于XHR2，我们可以直接上传或下载二进制内容，无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑：
1、通过input[type=“file”]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象，配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(){
                var binary = this.result;
                upload(binary);
        }
    }
}
 
//文件上传
function upload(binary){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload");
    xhr.overrideMimeType("application/octet-stream");
    //直接发送二进制数据
    if(xhr.sendAsBinary){
        xhr.sendAsBinary(binary);
    }else{
        xhr.send(binary);
    }
    
    // 监听变化
    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status===200){
                // 响应成功       
            }
        }
    }
}

总结
本篇主要介绍了FileReader对象的属性及应用场景，有了FileReader，我们可以将本地文件读取到内存中。文中我们提到了ArrayBuffer和类型化数组的概念，这使得我们可以在内存中进一步操作二进制数据，关于这部分内容，会在之后的博客中进行归纳。

zhangyizuishuai

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端头像上传功能实现之base64图片/头像上传详细解析2【扩展知识FileReader对象】

将图片变成base64字符串base64是一种数据格式就是一个字符串可以当图片来使用// base64之将图片在前端变为base64格式1.先获取图片2.FileReader对象将图片进行转换（转成base64格式）屁话不多说强行上代码看官勿笑 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte
复制链接

扫一扫