vue 前端将任意文件转为base64传给后端

前言

最近新项目，需要获取文件的bae64编码文本，但是原本是用的vantUI的uploader，对安卓手机的图片上传和文件上传的数量有限制，一次只能上传一张图片（简直麻了），于是舍弃了它，转而图片的继续沿用之前用过的weixin-js-sdk这个微信的上传图片接口进行上传图片。
但是还有一个要求是需要处理pdf为base64，这个微信的只能处理图片，所以花了很长的时间一直在查找资料，终于功夫不负有心人，做出来了获取pdf的base64编码的前端代码。
同时，经过测试，发现这个代码不仅仅能用在pdf上，任意格式，比如pdf，xslx，doc文件都可以转base64。

使用原生input

这个方式，使用的是H5原生的input进行上传文件

// getBase64为获取base64的方法
        <input type="file" @change="getBase64">

具体实现

ps:发现一个问题：reader.onload 获取不到内部的值，查询资料现对如下代码进行修改

原版：

// 界面
<template>
	<div>
		<input type="file" @change="getBase64">
	</div>
</template>
//js代码
<script>
	export default {
		methods: {
			getBase64(e) {
			// 选择的文件
			let file = e.target.files[0];
			console.log(file.name) // 文件名称，有需求可处理
			console.log(file.type) // 文件类型，有需求可处理
				// 判断文件是否读取完毕，读取完毕后执行
			    if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        let base64String = e.target.result;
                        // 此处可对该base64进行获取赋值传入后端
                        console.log("bese64编码：", base64String);
                    }
                }
			}
		}
	}
</script>

修改后:

// 界面
<template>
	<div>
		<input type="file" @change="getBase64">
	</div>
</template>
//js代码
<script>
	export default {
		methods: {
			getBase64(e) {
			// 选择的文件
			let file = e.target.files[0];
			console.log(file.name) // 文件名称，有需求可处理
			console.log(file.type) // 文件类型，有需求可处理
				// 判断文件是否读取完毕，读取完毕后执行
			    if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = e => {
                        let base64String = e.target.result;
                        // 此处可对该base64进行获取赋值传入后端
                        console.log("bese64编码：", base64String);
                    }
                }
			}
		}
	}
</script>

即：

reader.onload = function(e) {}     ======>修改为：
reader.onload = e => {}
主要原因是说function() {} 的方式不支持this,导致获取不到值

截图

以下为转base64后的截图样例

结语

综上，前端任意文件转base64的代码处理完成！