前端将任意文件转为base64传给后端
文件base64单个多个循环上传。
·
// 界面
<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>
更多推荐
已为社区贡献1条内容
所有评论(0)