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

小炎儿

已于 2022-10-19 11:19:08 修改

阅读量2.2k

点赞数

文章标签：前端 javascript vue.js

于 2022-09-20 10:57:24 首次发布

本文链接：https://blog.csdn.net/m0_63586775/article/details/126948847

版权

// 界面
<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.readAsText(file,"GB2312");//"GB2312"解决读取中文乱码问题
                    reader.onload = e => {
                        let base64String = Buffer.from(e.target.result).toString("base64");
                        // 此处可对该base64进行获取赋值传入后端
                        console.log("bese64编码：", base64String);
                        this.XXX(base64String, element.name);//调用上传接口
                    }
                }
			}
		}
	}
</script>

以上是单个文件上传

以下是多个文件循环上传

// 界面
<template>
	<div>
		<input type="file" @change="getBase64">
	</div>
</template>
//js代码
<script>
	export default {
		methods: {
			getBase64(e) {
			  console.log(e);
              let file = e.target.files;
              for (let i = 0; i < file.length; i++) {
                const element = file[i];
                if (window.FileReader) {
                 let reader = new FileReader();
                 reader.readAsText(element,"GB2312");//"GB2312"是读取编码，解决中文乱码问题
                 reader.onload = (e) => {
                   let base64String = Buffer.from(e.target.result).toString("base64");
                   // 此处可对该base64进行获取赋值传入后端
                   this.XXX(base64String, element.name);//调用上传接口
                 };
                }
              }
			}
		}
	}
</script>