导言 当初学者开发者首先与API合作时,他们往往只注重检索数据或向服务器发送文本.
随着它们变得更加自在和提出更复杂的请求,它们可能会遇到一个需要特别烦人的内容类型:多部分/形式数据。 multipart/form-data是一类既接受文件数据又接受文本数据的请求内容,因此"多部分".
虽然听起来很简单,但开发者收到出乎意料的错误并不罕见.
在此教程中,我将展示如何使用JavaScript正确发送多段/形式数据内容,由ExpressJS框架处理后端.
先决条件 此教程假设您已有使用 Express 的工程 。
为了正确处理发送给服务器的图像,您需要一个图像处理库.
用于此目的的标准库是Multer,这是用于此教程的.
我们还需要将数据发送到图像托管站点.
比较受欢迎的选项之一是Cloudinary,这个教程将使用.
如果你还没有这样做,下载到您的快递文件夹。
您可以使用以下命令这样做: 设置 Multer 要让服务器处理图像数据, 需要设置 Multer 。
在这样做之前,你需要一个位置来放置这些图像.
如果您的 Express 项目是用 Express 生成器创建的, 您可以使用公共文件夹的默认图像子文件夹来存储数据; 或者您可以创建自己的文件夹 。
一旦您决定了您图像的位置, 在您的快递文件夹中创建一个新文件, 并在顶端导入 Multer 。
这是您的配置文件 。
使用穆特的方法,创建您的存储变量来设置目的地和文件名.
以下是我自己的一个项目的例子 : “ const survey = multer.diskStorage ({ 目的地: (req, file, cb) {if (file.fieldname ===' profilepic") { cb (null,"."/ express-bookmark/public/profilepics"); 如果(file.fieldname === (file.field smark) / public/public/public/proficages"); 如果(file.fieldname ==="commentimage") {b (null,"."."/express-blic/public/commentimage"); 如果(file-blic/public/public/public/positage" ; {blic. {blic.] ; {blic. {blic.] 晚点再说 存储设置完成后,您需要创建并导出一个上传功能,以放置在需要文件上传的端点.
幸运的是,你只需要将穆特分配给一个变量,然后将您的存储变量设定为穆特的参数,就像这样:既然已经配置了穆特,你需要将上传功能调用在获取文件上传的端点上.
转到包含端点的文件并导入上传功能 。
如果您正在上传一个单一文件到服务器,那么您必须使用上传的方法,它以一个字段名作为参数.
它可能看起来是这样的: 或者, 如果您希望选项同时提交多个文件, 您可以使用这个方法 。
这把字段名作为第一个参数,第二个允许的最大图像数量.
无论您是否将您的中间软件功能保存在单独的文件中——我也是这样做的——或者用您的路由书写,此功能必须在您的端点后立即调用.
如果将上传功能放置在其它任何地方,则该功能不会起火,而穆特也不会处理文件.
建立云层 在将图像上传到您的数据库时,必须考虑您将要使用的方法.
如果你保存了图像的二进制数据,那么在图像由于数据大小而渲染出来时,可能会冒着超载计算机内存的风险.
这可能造成冻伤,甚至坠毁。
这是建议使用第三方主机存储的原因之一