Spring Boot 使用Angular?在一个API调用中同时上传数据和文件

jslywgbw  于 2022-12-29  发布在  Spring
关注(0)|答案(1)|浏览(114)

我正在写一个角应用程序,它允许用户填写一个表单。这个表单接受一个图像,另一个文件,和其他数据,如标签,描述等。到目前为止,我有它上传所有的数据作为一个dto,但我故意选择不包括文件的dto。
最初的想法是将文件发送到ImageKit,这样我就可以避免服务器端的文件管理。不幸的是,ImageKit只允许我上传图像。我需要一个解决方案,允许我上传图像和其他文件从表单一起的一致性。如果有其他免费平台与这样的服务,请让我知道。
同时,我已经决定将这两个文件上传到我的后端。这是我需要帮助的部分(除非有第三方的替代品,如Imagekit)
我已经看到了很多关于如何上传文件的建议,但是我看到的每个例子都有一个文件被附加到FormData对象,然后发送到后端。

  1. FormData是否仅适用于文件?
    1.我可以将文件对象添加到我的dto类中吗?还是必须使用FormData?
    1.我可以去掉dto并将所有成员追加到FormData对象中吗?
    1.如果文件必须与FormData一起使用,而其余数据则在dto中使用,那么我是否必须执行两次API调用?
    1.我应该将文件存储在数据库还是文件系统中?
    1.是否有通用/标准的方法来上传与文件相关的数据?
    我觉得这是一个常见的任务,即保存可能有个人资料图片的用户帐户
6l7fqoea

6l7fqoea1#

  1. FormData是否仅适用于文件?
    不,你也可以把它用于JSON。你需要像这样把它转换成一个字符串:
const sampleJson = { key: "Something Data", childs: [ {key: "Child Data"}, {key: "Child Data 2} ]};

const formData = new FormData();
formData.append("file", files);
formData.append("jsonData", JSON.stringify(sampleJson));

1.我可以将文件对象添加到我的dto类中吗?还是必须使用FormData?
dto?你是用NestJS工作的?通常文件在数据库中不会丢失任何东西。相反,你可以设置信息,比如文件名,文件路径....到表中。
1.我可以去掉dto并将所有成员追加到FormData对象中吗?
如果我理解正确的话,是的,第一点。
1.如果文件必须与FormData一起使用,而其余数据则在dto中使用,那么我是否必须执行两次api调用?
第一点。
1.我应该将文件存储在数据库还是文件系统中?
永远不要在数据库中!文件在数据库中不会丢失任何东西。不管是哪个数据库。使用文件服务器,或者机器的常规文件系统。创建一个上传文件夹,设置(以Multer为例-link)静态路径,并将文件保存在该文件夹中。
1.是否有通用/标准的方法来上传与文件相关的数据?
上传非常简单,你可以在第一点看到。在后端,你可以使用Multer(见第五点)。使用快速后端,你可以做以下事情:

const uploadData = async (req, res, next) => {
  const data = JSON.parse(req.body.jsonData);

  for (let file of req.files) {
    console.log(file); // Here the file name, mimetype and so on...
    // The file itself is saved in the folder you have set with multer.
  }
...

相关问题