vue前端如何将任意文件转为base64传给后端
更新时间：2024年03月07日 10:17:35 作者：相与还
这篇文章主要介绍了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的代码处理完成！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue页面监听是否置为后台或可见状态问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了详解vue-cli 快速搭建单页应用之遇到的问题及解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于Vue.js原理分析之nextTick实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要为大家介绍了一款mapbox gl开箱即用的地图引擎库，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题
这篇文章主要介绍了vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
我们开发的系统，一般可以不用考虑语言国际化的问题，大多数系统一般是给本国人使用的，而且直接使用中文开发界面会更加迅速 一些，不过框架最好能够支持国际化的处理，以便在需要的时候，可以花点时间来实现多语言切换的处理，使系统具有更广泛的受众用户。2021-05-05
这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论