浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉_json转formdata

news/2025/2/3 23:56:54/

在这里插入图片描述

formData 请求头：

在这里插入图片描述

formData 负荷：

在这里插入图片描述

通过上面的几张图我们就能大概明白了，前端传的都是二进制数据，两者的 content-type 是不同的，json 我们已经序列化好了，而 formdata 还是需要进行处理。

formdata 的两种格式

multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；
x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。

json__formData_64">json 对象转 formData

逐个转换

let obj = {id: "001",name: "小蓝",age: "18",sex: "女",
};
const formData = new FormData();
formData.append("id", obj.id);
formData.append("name", obj.name);
formData.append("age", obj.age);
formData.append("sex", obj.sex);
console.log(formData);

所有属性值转换

let obj = {id: "001",name: "小蓝",age: "18",sex: "女",
};
const formData = new FormData();
Object.keys(obj).map((key) => {formData.append(key, obj[key]);
});
console.log(formData);

json_121">formData 对象转 json

var jsonObj = {};
formData.forEach((value, key) => (jsonObj[key] = value));

拓展 – base64 和文件流互转

文件流转 base64

<template><div><input type="file" @change="handleFileChange" /></div>
</template><script>
export default {methods: {handleFileChange(event) {// 获取用户选择的文件const file = event.target.files[0];// 创建一个FileReader对象const reader = new FileReader();// 当文件读取完成后触发的事件处理程序reader.onload = () => {// 获取文件流const base64 = reader.result;// 在这里进行base64编码的处理console.log(base64);};// 读取文件流reader.readAsDataURL(file);},},
};
</script>

在这里插入图片描述

base64 转文件流

<template><div></div>
</template><script>
export default {mounted() {// Base64字符串;let base64String = "data:image/png;base64"base64String = this.convertBase64ToBlob(base64String);console.log(base64String);},methods: {convertBase64ToBlob(base64String) {// 将Base64解码为二进制数据const byteCharacters = atob(base64String.split(",")[1]);// 创建一个Uint8Array来存储二进制数据const byteArrays = new Uint8Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteArrays[i] = byteCharacters.charCodeAt(i);}// 创建Blob对象const blob = new Blob([byteArrays], { type: "text/plain" });// 将Blob对象转换为File对象const file = new File([blob], "filename", { type: "text/plain" });return file;},},
};
</script>