当前位置：首页 > news >正文

使用FormData格式上传图片

news 来源：原创 2025/6/1 22:29:01

为什么要使用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);