表单中,上传文件(图片)和表单是分开还是一起上传?

发布时间:2024年01月20日

前端上传文件方式

项目中会有很多文件上传的需求,例如:头像上传、表格文件、word文档等。

总体来说前端上传文件一共有两种方式;
1、使用base64;正常加参数上传给后台、这种方式在手机端会很慢、因为在手机在转化文件为base64时很慢;
2、使用FormData 上传 设置请求头multipart/form-data

使用base64一般会比原图要大一些,比较适合用于小图标,大一点的图片就免了。

表单中,上传文件(图片)和表单是分开还是一起上传?

上传文件和表单数据可以选择分开上传或一起上传。

  1. 分开上传:这种方式适用于需要独立处理文件和表单数据的情况,可以分别使用合适的方式进行处理。
    文件上传:你可以使用专门的文件上传接口或库来处理文件上传,将文件保存到服务器上的指定位置,并返回一个文件路径或标识符给前端。
    表单数据:使用普通的表单提交方式,将表单数据作为请求的一部分发送给后端,后端接收并处理这些表单数据。

  2. 一起上传:这种方式适用于文件和表单数据之间存在关联性的情况,可以将它们一起上传,以便后端能够更好地处理和关联这些数据。
    将文件和表单数据一起封装在请求体中,可以使用FormData对象来实现。FormData对象可以同时包含文件和表单数据,并通过POST请求发送给后端。
    后端接收到请求后,可以通过相应的方式解析出文件和表单数据,并进行处理。

个人总结:非常小的文件,对文件内容不需要过多校验的场景,我感觉一起上传方便简单一点。但是对于一些大文件、大表单,甚至文件、图片内容、大小、格式有特殊要求的场景,分开传输,在大表单提交之前做好文件、图片上传以及后台校验存储。

在实践中,分开上传:是比较常见的做法,特别适用于需要在表单提交之前进行文件或图片上传的情况。某些场景下,将文件(图片)和表单数据一起上传也是可行的。这种方式适用于小文件且无需过多校验的情况。

需要注意的是,对于大文件或者需要进行特殊校验、存储的情况,分开上传可以更好地管理和处理数据。

我什么比较喜欢分开上传

大表单和图片的提交分开可以显著提高用户体验。当用户遇到需要上传图片的表单时,如果一次性将所有信息都填写完毕再提交,会出现以下问题:

  1. 用户等待时间过长:一次性提交大量数据,上传所需时间较长,用户需要等待。另外大表单往往还有很多字段上的业务处理逻辑。
  2. 数据传输失败率增加:上传的数据量过大,可能会因为网络不稳定而导致上传失败。如果上传失败,用户需要重新上传或者重新填写整个表单,增加用户繁琐操作。
  3. 用户体验差:填写表单时,用户很难判断哪些数据填写有误,如果出现错误,需要重新填写整个表单。后台对文件、图片内容或格式校验可能会比较费时。

将上传图片的工作和提交表单的工作分离出来可以提高用户体验,同时也能够减少因为表单提交失败而导致的用户体验下降。这样可以避免用户在最后提交表单才发现上传的信息不正确的尴尬情况。

如果用户一次提交一个大表单以及多个图片,会导致数据量较大,上传速度较慢。这可能会增加用户等待的时间,并且可能会面临网络不稳定或超时的问题。此外,如果上传过程中出现错误,用户需要重新填写整个表单,增加了用户的繁琐操作。

通过将大表单和图片的提交分开,可以减少单次提交的数据量,从而提高上传速度。用户先上传图片,后台进行校验和存储,返回图片的URL或者ID。在用户填写完表单后,只需要提交表单数据和已经上传并校验过的图片的URL或者ID,减少了数据传输量,提高了提交的速度。

此外,分开提交还可以提高表单提交的成功率。如果一次提交整个表单,当其中某个字段或者图片校验失败时,整个表单都需要重新填写。而分开提交,当用户填写完表单后,即使在提交表单之前出现错误,用户只需要重新上传校验失败的图片,而不需要重新填写整个表单,减少了用户的繁琐操作。

总结,将大表单和图片的提交分开可以提高提交表单的成功率和性能。用户先上传图片,后台进行校验和存储;用户填写完表单后,只需要提交表单数据和已经上传并校验过的图片的URL或者ID,减少了数据传输量和用户繁琐操作,提高了用户体验和整体性能。

实现思路

在用户选择图片后,将图片流上传到服务器保存,并返回一个图片的URL或者ID,然后将这个URL或者ID与表单数据一起提交到后台。这样可以确保图片已经在后台进行了校验和存储,减少了提交表单时校验失败的情况。

当用户提交表单时,后台只需要对表单数据进行校验,不需要再对图片进行额外的校验,可以提高后台处理效率和减少出错的可能性。如果表单数据校验通过,就可以将表单数据和图片的URL或者ID一起保存到数据库中。

图片上传存储的原理

后端获取到上传文件之后,将文件存储到自己定义的文件路径,之后为该文件(这里指的就是头像图片)创建一个唯一的文件名,防止文件名重复出现覆盖情况(比如为不同的人上传了相同一张的头像图片),并用于获取对应图片信息回显。

上传操作完成之后,图片源文件写入了本地自定义目录,同时将生成的唯一文件名存储到了数据库中。

在Postgres中如何存储图像?

在PostgreSQL中存储图像可以通过以下两种方式实现

  1. 存储为二进制数据:将图像文件转换为二进制格式,并将其存储在数据库中的BLOB字段中。这种方法简单,但可能会导致数据库变得庞大,并且对于大型图像来说,读取和写入速度可能会很慢。

PostgreSQL的二进制数据类型为bytea,可最多保存2G的数据。

  1. 存储为文件路径:将图像文件保存到服务器上的指定位置,并在数据库中存储文件路径或URL。这种方法可以避免数据库变得庞大,并且可以更快地读取和写入大型图像。但是需要注意,该方法需要确保服务器上的文件路径与数据库中保存的路径一致,并且需要备份和恢复文件。

通常情况下,建议将图像文件存储在服务器中的指定位置,并在数据库中存储文件路径或URL,这样可以更好地管理和处理图像数据。如果您需要使用第一种存储方式,请确保选择适当的数据类型(如bytea),并避免在数据库中存储过大的图像。

如何从postgresql数据库中获取bytea图像并在django中显示它们?

如何从postgresql数据库中获取bytea图像并在django中显示它们?
参考URL: https://www.cnpython.com/qa/1407771

文章来源:https://blog.csdn.net/inthat/article/details/127881032
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。