Question

我的任务是将图像上传到远程服务器并在本地保存这些图像。使用Base64通过JSON传输并使用Node.js存储非常容易。但是，有没有理由不使用这种类型的文件上传，使用AJAX或其他方式？（除了30％的带宽增加，我知道。你仍然可以在你的答案中包括它，以便它充满。）

Answer 1

Base64只是一种转换格式，HTTP服务器无法接受内容中的二进制数据，但HTTP Header类型是Web服务器定义的二进制或可接受的格式。

您可能知道，JSON可以包含各种格式和信息;因此，你可以包含诸如

{
     IMG_FILENAME="HELLO",
     IMG_TYPE="IMG/JPEG", 
     DATA="~~~BASE64 ENCODED IMAGE~~~~" 
}

您可以通过AJAX或其他方法发送JSON文件。但是，正如我告诉你的那样，HTTP服务器有各种限制，因为它应该保留RFC2616（https://tools.ietf.org/html/rfc2616）。

简而言之，Sending Through JSON可以包含各种数据。 AJAX只是其他方式的一种发送方式。

Answer 2

我在一个项目中使用了相同的解决方案。

唯一需要考虑的是请求正文的大小。如果您所有的图像都很小，例如几张M，那么您应该没问题。

我的服务器是asp.net核心，其maxAllowedContentLength值为30000000，大约为28.6MB。当图片大小超过此大小时，请求失败，并显示错误“请求正文太大”。

我认为node.js应该具有类似的设置，请确保对其进行调整以满足您的需求。

请注意，如果请求大小太大，由于网络流量，请求超时的可能性会相应增加。对于手机的请求，这尤其是个问题。

Answer 3

数据编码

出于各种原因，可以使用每种数据 Encoding 和 Decoding ，这些都有各自的优点和缺点。

喜欢：

错误检测编码：可以检测错误但增加数据使用量。
加密编码：将数据转换为密码，入侵者不会解密。

有很多编码算法，可以更改数据这样做很有用。

但使用

Base64编码，它将每个6位数据编码为一个字符（8位）。 3字节到4字节，但其中仅包含字母数字（62个字符）和2个符号。

它的好处是剂量没有特殊字符和符号

Base64目的

可以通过禁止我们拥有的频道传输任何数据：

特殊字符，例如' " / \ ...
不可打印的ascii，例如\0 \n \r \t \a
8位Ascii码（具有1个MSB的ascii）

二进制文件通常包含任何数据，如果按ascii的顺序将其转换为任何8位字符。

在某些协议和应用程序中，有一些I / O接口，它们仅接受少量字符（带有几个符号的字母数字）。

对：

防止代码注入（例如：SQL注入或任何类似于prgramming-language-syntax的字符;）
，或者只是某些字符已经在其协议中具有含义（例如：在URI QueryString中，字符&具有含义，并且不能在任何QueryString值中）
或输入可能不打算接受非字母数字值。（例如：它应仅接受人名）

但是使用base64编码，您可以编码任何内容并通过您想要的任何频道。

示例：

您可以对图像或应用程序进行编码，然后使用 SQL
您可以在 URI
您可以使用协议来发送二进制文件，该协议被设计为仅接受人类聊天作为字母数字，例如 IRC频道

Answer 4

我认为使用base64是有效的。

唯一的疑问是请求的大小，但是如果您在前端将base64分割，则可以规避，如果一个30mb的文件可以将每个请求分割为5mb，在后端将各个部分放在一起，则很有用甚至在网络出现问题并损坏了某些部分时也可以进行“继续下载”。

拥抱

Answer 5

Base64将您的数据转换为二进制数据的ASCII表示形式。例如，它允许您将数据嵌入文本流（例如JSON）中。 Base64将传输的数据大小增加了33％。

multipart / form-data是在HTTP请求中传输二进制数据的标准方法。它允许您对要传输的每个部分使用特定的编码/内容类型。我认为，除非您有特定要求或设备/ SDK功能，否则应该坚持分段上传。

查看这些链接

What is difference Between Base64 and Multipart?

Base64 image upload VS Binary image upload?

Answer 6

base64编码的思想是避免基于文本的协议使用二进制数据。在这种情况之外，我认为总是一个坏主意。

专业人士

避免基于文本的协议使用二进制数据，并且独立于外部文件。
避免使用delimiter collision。

缺点

API响应有效载荷较大/太大。
用户体验会受到负面影响，除非有人调用一些延迟加载。

通过将所有图像数据一起包含在一个API响应中，该应用在屏幕上绘制任何东西之前必须接收所有数据。这表示用户将在屏幕上看到加载状态的时间更长，并且该应用将在用户等待时显得呆滞。

不过，Axios和一些惰性加载器（例如react-lazyload或lazyload等）减轻了这种情况。

CDN缓存更加困难。与图像文件相反，API响应中的Base64字符串无法通过CDN缓存传递。整个API响应必须由CDN交付。（参见Don’t use Base64 encoded images on mobile和Why "optimizing" your images with Base64 is almost always a bad idea）
不再可以在设备上缓存图像。
在服务器端，内容管理变得更加困难。大多数内容管理工具将图像作为二进制文件处理。但是，当使用二进制文件进行管理时，会有编码/解码的时间开销。
No security gain和工程上的开销来减轻（Sanitizing, Input Validation, Escaping）。 XSS攻击示例：Preventing XSS with Base64 encoding: The False sense of web application security

该网站的开发人员可能已经选择通过使用隐秘的URL和其他方式使网站看起来更加安全。但是那个并不意味着这就是默默无闻的安全性。

如果他们的网站容易受到SQL注入的攻击，并且他们尝试通过对URL进行编码来隐藏该网站，那么它就变得晦涩难懂。如果他们的网站安全可靠，可防止SQL注入； XSS; CSRF；等等，而他们致力于对此类网址进行编码，那简直就是愚蠢。

它对诸如svg（Probably Don’t Base64 SVG）之类的文本编码图像没有帮助
IE6或IE7或7.2之前的Opera（Which browsers support data URIs and since which version?）不支持数据URI

参考

https://en.wikipedia.org/wiki/Base64

https://en.wikipedia.org/wiki/Delimiter#Delimiter_collision

SO：What is base 64 encoding used for?

https://medium.com/snapp-mobile/dont-use-base64-encoded-images-on-mobile-13ddeac89d7c

https://css-tricks.com/probably-dont-base64-svg/

https://security.stackexchange.com/questions/46362/purpose-of-using-base64-encoded-urls

https://bunnycdn.com/blog/why-optimizing-your-images-with-base64-is-almost-always-a-bad-idea/

https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

通过JSON上传Base64文件的优缺点是什么，而不是AJAX或jQuery上传？

6 个答案:

数据编码

Base64目的