杂谈FormData

FormData

FormData 对象是什么

FormData 对象是一个 HTML5 提供的 API，支持上传二进制文件和大型文本数据，在前端中上传图片时，我们通常会使用 FormData 对象来构造表单数据，并将其发送给后端

FormData 为什么能传递图片

传统的表单只能包含键值对（key-value pairs），而无法包含二进制数据。但是，FormData 对象可以包含二进制数据，例如图片文件。当我们使用 append() 方法向 FormData 对象中添加文件对象时，文件会被自动转换为二进制数据，并加入表单数据中

上传图片时，由于图片数据通常比较大，因此不能将其放在 URL 中。如果使用 GET 请求传递图片数据，则需要将图片数据转换为 Base64 编码格式，这样会造成数据冗余和传输效率低下。因此，我们通常使用 POST 请求传递图片数据，而在 POST 请求中，FormData 对象可以将图片数据包含在请求体中。

FormData的一些基本的操作方法与操作手续

创建 FormData 对象： 可以使用 new FormData() 方法创建一个新的 FormData 对象

const formData = new FormData();

添加值到 FormData 对象： 可以使用 append() 方法向 FormData 对象中添加新的键值对数据。该方法接受两个参数，第一个参数是键名，第二个参数是键值

formData.append('username', 'Tom');
formData.append('password', '123456');

还支持添加 Blob 对象

formData.append('file', blob, 'example.png');

删除 FormData 对象中的值： 可以使用 delete() 方法从 FormData 对象中删除指定的键名及其对应的键值

formData.delete('username');

获取 FormData 对象中的值： 可以使用 get() 方法从 FormData 对象中获取指定键名的键值

const username = formData.get('username');

application/json、application/x-www-form-urlencoded、form-data

application/json、application/x-www-form-urlencoded、form-data这三种格式是什么

这三种格式是常见的用于在客户端和服务器之间传输数据的格式

有什么作用

application/json 是一种数据传输格式，用于在客户端和服务器之间传递结构化的数据。它使用 JSON（JavaScript Object Notation）作为数据的表示方式，将数据序列化为字符串进行传输。JSON 格式具有良好的可读性、易于解析和生成，并被广泛支持和应用于各种编程语言和平台。

application/x-www-form-urlencoded 是一种常见的表单数据传输格式。它将表单数据按照 key-value 的形式进行编码，并使用 URL 编码格式进行表示。在客户端发送请求时，表单数据被编码为一个字符串，每个字段的键值对被连接起来，并用&符号分隔，例如key1=value1&key2=value2。这种格式主要用于 HTML 表单提交

multipart/form-data 是一种用于上传文件和表单数据的格式。它可以同时传输二进制文件和其他表单数据，适用于需要上传文件的场景

三者有什么区别

数据结构：application/json 使用 JSON 格式表示数据，可以传递复杂的、嵌套的数据结构；application/x-www-form-urlencoded 和 multipart/form-data 使用键值对的形式进行数据表示，适合传递较简单的数据结构。

适用场景：application/json 适用于传输结构化数据，常用于 RESTful API 中；application/x-www-form-urlencoded 适用于表单提交和较简单的数据传输；multipart/form-data 适用于文件上传和同时传输文件和表单数据的场景。

数据编码方式：application/json 使用 JSON 格式进行数据编码；application/x-www-form-urlencoded 使用 URL 编码格式进行数据编码；multipart/form-data 使用分隔符和多个部分进行数据编码。

文件上传支持：application/json 和 application/x-www-form-urlencoded 不直接支持文件上传，而 multipart/form-data 可以支持文件上传。

Blob URL与base64

是什么

blob:http://127.0.0.1:5500/d96d1b24-0a77-4010-b6c0-4d44ef95e485   Blob URL

Blob URL 是一种用于引用二进制数据的特殊 URL 格式。它指向浏览器中的二进制数据块（Blob 对象），可以是图像、音频、视频或其他文件类型。Blob URL 的格式是 blob:<origin>/<unique-id>，其中 <origin> 表示 URL 的来源，<unique-id> 是一个唯一的标识符

Base64 是一种编码方式，用于将二进制数据转换为纯文本字符串。它将二进制数据每三个字节为一组进行处理，然后将每组转换为四个字符的 Base64 字符串

什么区别

Blob URL 可以直接访问二进制数据，而不需要进行编码或解码。

Base64 编码后的数据可以方便地传输和存储，但需要进行编码和解码才能使用

canvas将内容转为blob，然后上传至后台

方法一、

let canvas = $('#canvas')
canvas.toBlob(blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function() {
        const file = new File([blob], 'fileName.jpg', { type: blob.type });
        // 现在，可以将生成的 file 对象作为参数传递到后台了
        uploadFile(file);
    }
});

function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
}

processData: false, contentType: false, 什么作用

processData: false：默认情况下，当使用jQuery.ajax()或$.ajax()发送POST请求时，jQuery会将数据转换为查询字符串格式（key=value&key=value）并发送给服务器。但是，当你需要发送FormData、Blob、ArrayBuffer等特殊类型的数据时，你可以将processData设置为false，告诉jQuery不要对数据进行处理。这样将保持原始数据的格式，以便正确发送到服务器

contentType: false：默认情况下，当使用jQuery.ajax()或$.ajax()发送POST请求时，jQuery会根据数据类型自动设置Content-Type头部。然而，当你发送FormData对象时，你需要将contentType设置为false，以便让浏览器自动设置正确的Content-Type头部（通常为multipart/form-data）

方法二、

                canvas.toBlob((blob) => {
                    const formData = new FormData();
                    formData.append('file', blob, 'canvas.jpg');
                    formData.append('name', 'My Canvas Image');
                    $.ajax({
                        url: '/upload',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            console.log(response);
                        },
                        error: function (xhr, status, error) {
                            console.error(error);
                        }
                    });
                });