// 界面
<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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐