前端如何上传文件给服务器

上传文件到服务器常用的方法有两种

第一种：将文件转换成base64编码后使用POST上传给服务器

实现方法

URL.createObjectURL(BlobFile)
//或者由canvas生成
canvas.toDataURL('image/jpeg',0.8)

优点：

可以将二进制文件转换为文本数据进行传输，避免了二进制文件传输可能遇到的编码问题和字节顺序的差异问题，从而提高了兼容性。

Base64 编码后的文本数据相对于二进制数据而言更容易进行文本处理和解析，比如可以直接将其嵌入到 HTML、CSS 或 JavaScript 中，或者将其作为 URL 参数传递。

在一些低带宽网络环境下，Base64 编码可以通过减小请求的数据量来减少网络带宽的消耗。

缺点

Base64 编码后的数据比原始二进制文件的大小要大 33% 左右，这意味着对于大文件的传输来说，将其转换为 Base64 编码后可能会消耗更多的网络带宽和服务器资源。

将文件转换为 Base64 编码后会增加 CPU 和内存的负担，因为 Base64 编码需要进行复杂的编码和解码过程。

在服务器端处理 Base64 编码的数据时需要进行解码，这会增加服务器的负担和数据处理时间。

第二种：将二进制文件直接上传给服务器

实现方法

如果需要把base64编码的文件转换成二进制文件可以参考：
Base64 编码的字符串转换为 Blob 对象方法

let formData = new FormData();
formData.append("file", file.blob());
formData.append("text", "这是一段文字");

axios({
  method: "post",
  url: "/upload",
  headers: { "Content-Type": "multipart/form-data" },
  data: formData,
}).then((response) => {
  console.log(response.data);
});

优点：

Blob 对象表示不可变、原始数据的类文件对象，它通常用于处理二进制数据或大型数据的传输。使用 Blob 对象上传文件可以直接获取文件的二进制数据，而不需要通过一些额外的库或插件来解析文件内容。

在使用 Blob 对象上传文件时，可以直接将文件对象作为参数传递给 XMLHttpRequest 或 fetch API，从而实现更加简洁的代码编写方式。

Blob 对象上传文件的速度通常较快，因为它直接使用二进制数据进行传输，避免了其他编码方式可能存在的额外的处理时间和计算开销。

缺点：

使用 Blob 对象上传文件时需要手动设置 Content-Type 等一些 HTTP 头信息，这可能需要开发者在代码中进行额外的设置。

在使用 Blob 对象上传文件时，需要对文件进行读取和解析，这可能会增加 CPU 和内存的负担，尤其是在处理大型文件时。

对于不支持 Blob 对象的浏览器或客户端环境，使用 Blob 对象上传文件可能会存在兼容性问题。