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

28 0 0

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

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

第一种：将文件转换成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);
});