为什么要使用FormData格式上传图片
1. 为什么使用 FormData？
FormData 是一种专门用于构建表单数据的对象，它能够以 multipart/form-data 格式发送数据，这是文件上传的标准格式。以下是使用 FormData 的主要原因：
- 简单易用
直接支持文件对象：FormData 可以直接将文件对象添加到表单数据中，而不需要手动处理文件的二进制数据。- 支持多种数据类型：除了文件，FormData 还可以
添加其他表单数据（如文本字段），非常适合复杂的表单提交场景。
- 与浏览器和后端兼容
- 浏览器支持：FormData 是 HTML5 的标准功能，几乎所有现代浏览器都支持它。
- 后端支持：大多数后端框架（如 Node.js 的 express、Python 的 Flask、PHP 等）都支持解析 multipart/form-data 格式的请求。
- 安全性
- 自动处理编码：FormData 会自动对文件内容
进行适当的编码，避免了直接发送二进制数据可能带来的安全问题。 - 防止注入攻击：使用 FormData 可以减少因手动处理文件内容而引入的安全漏洞。
2. 如果不使用 FormData，可以怎么做？
如果你不想使用 FormData，可以通过其他方式实现文件上传，但需要手动处理文件的二进制数据。以下是两种常见的替代方法：
- 使用 FileReader 和 ArrayBuffer
- 你可以使用 FileReader 读取文件内容，然后将文件内容转换为 ArrayBuffer 或 Base64 格式，再通过 XMLHttpRequest 或 fetch 发送。
const file = item.file.file;
const reader = new FileReader();
reader.onload = function(event) {const binaryData = event.target.result;fetch('/upload', {method: 'POST',headers: {'Content-Type': 'application/octet-stream'},body: binaryData}).then(response => response.json()).then(data => {if (type === '文章封面' && data.msg === '上传的图片比例不对') {isFit.value = false;} else {image_url.value = data.data[0].url;}}).catch(error => console.error('文件上传失败:', error));
};reader.readAsArrayBuffer(file);
- 优点：
可以直接处理文件的二进制数据，适合一些需要对文件内容进行预处理的场景。 - 缺点：
- 代码复杂，需要手动处理文件的读取和发送。
需要设置 Content-Type，并且后端需要能够解析原始二进制数据。
- 使用 Base64 编码
你可以将文件内容转换为 Base64 格式，然后通过 fetch 或 XMLHttpRequest 发送。
const file = item.file.file;
const reader = new FileReader();reader.onload = function(event) {const base64Data = event.target.result.split(',')[1]; // 去掉数据 URI 的前缀fetch('/upload', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({file: base64Data,type: type})}).then(response => response.json()).then(data => {if (type === '文章封面' && data.msg === '上传的图片比例不对') {isFit.value = false;} else {image_url.value = data.data[0].url;}}).catch(error => console.error('文件上传失败:', error));
};reader.readAsDataURL(file);
- 优点：
Base64 格式是文本格式，适合通过 JSON 发送，后端处理起来相对简单。 - 缺点：
Base64 编码会增加数据大小（约 33%），可能导致上传速度变慢。
后端需要能够解析 Base64 格式的数据，并将其转换回二进制文件。
3. 为什么推荐使用 FormData？
- 尽管有其他替代方法，但 FormData 仍然是处理文件上传的首选方式，原因如下：
- 简单易用：FormData 的代码更简洁，减少了手动处理文件内容的复杂性。
- 兼容性好：FormData 是标准的解决方案，与浏览器和后端框架高度兼容。
- 安全性高：FormData 会自动处理文件内容的编码，减少了安全漏洞的风险。
- 支持多种数据类型：FormData 可以同时发送文件和其他表单数据，非常适合复杂的表单提交场景。
)
