如何使用input表单向服务发送(占用较小)图片文件(body传输)？涉及到FileReader内置对象

原创已于 2022-03-25 17:00:51 修改 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #原型模式

于 2022-03-25 16:28:36 首次发布

Node 同时被 2 个专栏收录

10 篇文章

订阅专栏

问题

4 篇文章

订阅专栏

本文介绍如何使用前端技术实现文件上传功能，并详细解释了如何将文件转换为Base64编码，以便于在网络中传输。此外，还介绍了如何在后端（以Node.js为例）接收这些Base64编码的数据并将其保存为文件。

由来

在写数据处理后台的时候遇到一个问题？input:file发送文件到后台的时候发现文件无法被整体上传，上传后也无法直接写入到服务的静态文件中

解决

1 使用 input:file接收要上传的文件

注意这里的文件编码需要使用input.files[0]来拿到, 普通的通过input.value只能获取到文件流地址

<body>
    <input type="file" name="" id="file">
    <button class="btn">上传</button>
    <script>
        document.getElementsByClassName('btn')[0].addEventListener('click', () => {
            console.log(document.getElementById('file').value);
            // C:\fakepath\01.jpg
        });
    </script>
</body>

使用input:files, 可以获取到一个文件列表

<body>
    <input type="file" name="" id="file">
    <button class="btn">上传</button>
    <script>
        document.getElementsByClassName('btn')[0].addEventListener('click', () => {
            console.log(document.getElementById('file').files);
            // FileList {0: File, length: 1}
        });
    </script>
</body>

获取到其中要上传的文件对象

<body>
    <input type="file" name="" id="file">
    <button class="btn">上传</button>
    <script>
        document.getElementsByClassName('btn')[0].addEventListener('click', () => {
            console.log(document.getElementById('file').files[0]);
			// File {name: '05.jpg', lastModified: 1646900166527, lastModifiedDate: Thu Mar 10 2022 16:16:06 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 4201, …}
			//  lastModified: 1646900166527
			// lastModifiedDate: Thu Mar 10 2022 16:16:06 GMT+0800 (中国标准时间) {}
			// name: "05.jpg"
			// size: 4201
			// type: "image/jpeg"
			// webkitRelativePath: ""
        });
    </script>
</body>

2 我们需要将文件数据进行`转码`，这里将转换为base64位的字符

转换的过程中需要使用一个内置对象FileReader
FileReader对象用于异步读取用户本地的文件
属性

属性	描述
error	文件读取时出现的错误
readyState	表示文件读取的状态。 0 表示未加载任何数据； 1 表示数据正在被加载； 2 表示所有数据加载完毕
result	文件读取完成的内容

事件

事件	描述
onabout	读取中断时触发
onerror	读取失败时触发
onload	读取完成后触发
onloadstart	读取开始时触发
onloadend	读取结束时触发，与load不同的是，loadend在成功或失败时都会触发
onprogress	文件读取Blob时触发

方法

方法	描述
about()	终止读取
readAsArrayBuffer()	开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象
readAsDataURL()	读取Blob文件；读取的文件将以`date:base64URL`的方法保存
readAsText()	读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容

这里主要使用readAsDataURL方法

转码

<body>
    <input type="file" name="" id="file">
    <button class="btn">上传</button>
    
    <script>
        document.getElementsByClassName('btn')[0].addEventListener('click', () => {
            let file = document.getElementById('file').files[0];
            // 创建读取实例
			let readFile = new FileReader();
				// 开始读取
				readFile.readAsDataURL(file);
				// 监听读取状态
				readFile.addEventListener('load', () => {
					// 读取完成后获取base64位的初始数据
					let base64 = readFile.result;
				
					console.log(base64);
					// data:image/jpeg;base64,/9j/4AAQSkZJRg················IgIiICIiAiIgf/2Q==
					// 完整 的 base 在文章末尾展示
				});
        });
    </script>
</body>

3 将base64字符串发送到服务端

省略

因为使用的是body传输，所以无需配置以下头信息

let header = new Headers({
‘Content-Type’: ‘multipart/form-data’,
});

4 服务端接收base64并处理

以使用node服务为例

// 上传图片数据的接口
dataRouter.post('/summit', (request, response) => {
    // 获取body参数中的base64字符
    let { base64Data } = request.body;

    //过滤data:URL --- 利用正则替换掉base64字符前面的图片标志信息
    let base64Data = address.replace(/^data:image\/\w+;base64,/, "");  
});

利用Buffer转为buffer数据

服务器要将指定接收的图片写入服务，需要将其转为buffer数据

dataRouter.post('/summit', (request, response) => {
    // 获取body参数中的base64字符
    let { base64Data } = request.body;

    //过滤data:URL --- 利用正则替换掉base64字符前面的图片标志信息
    let base64Data = address.replace(/^data:image\/\w+;base64,/, "");  
    
    // 转为buffer
    let buffer = new Buffer.from(base64Data, 'base64');

	// 写入服务
	fs.writeFile('xxxx/xxx', buffer, (···) => {···});
});