我怎么能上传数组的图像与其他形式的数据使用nextjs &保存数据到mongodb数据库和图像到cloudinary或localhost？

guicsvcw 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(123)

我试图在最新版本的NextJS中实现表单提交逻辑。在我例子中，我有一些接受多个文件或图像的表单输入和文件输入。现在我的要求是我想在api/addDetails中进行API调用，然后将表单数据保存到mongodb数据库，并将图像保存到cloudinary或本地服务器。我需要生成的每个图像的网址，并保存在数据库中，以及这样当我们提出一个获取请求，我们可以从数据库中获取所有的细节。我分享的是示例形式和一些逻辑。可能会有更多的投入，但这将足以让我开始。请考虑我作为你的实习生和分享你的帮助：）.
我试过cloudinary，multer，令人生畏，都一个接一个，也一起。大多数时候我有一个问题，如未定义的头，关键的依赖性错误，咖啡脚本错误等等。我分享你简单的形式与3输入，帮我写后端代码来处理API请求。你可以在我的前端修改任何代码我只是想让它工作现在。

"use client";
import axios from "axios";
import React, { FormEvent, useRef, useState } from "react";

const AddDetails= () => {
  const nameRef = useRef<HTMLInputElement>(null);
  const descriptionRef = useRef<HTMLInputElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const nameInput = nameRef.current!;
    const descriptionInput = descriptionRef.current!;
    const fileInput = fileRef.current!;

    const formData = new FormData();
    for (const file of Array.from(fileInput.files ?? [])) {
      formData.append("files", file);
    }
    formData.append("name", nameInput.value);
    formData.append("description", descriptionInput.value);

    await axios.post("/api/addDetails", formData);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="file" name="files" ref={fileRef} multiple />
        <label htmlFor="name" className="block text-sm font-medium ">
         Name
          </label>
        <input
          type="text"
          name="name"
          ref={nameRef}
          className="mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm"
        />
         <label htmlFor="name" className="block text-sm font-medium ">
         Description
          </label>
        <input
          type="text"
          name="description"
          ref={descriptionRef}
          className="mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm"
        />
        <button
          type="submit"
          className="px-2 py-1 rounded-md bg-violet-50 text-violet-500"
        >
          Upload
        </button>
      </form>
    </>
  );
};

export default AddDetails;

谢谢大家，非常感谢

next.js

来源：https://stackoverflow.com/questions/76512734/how-can-i-upload-array-of-the-images-with-other-form-data-using-nextjs-save-da

1条答案

按热度按时间

fhg3lkii1#

听起来你需要写一个后端。老实说，如果你是我的实习生，我会告诉你阅读文档并搜索一下。当你遇到像你提到的错误时，是时候用谷歌搜索了。
但一般来说，步骤如下：

使用您选择的框架（例如，Express.js，Django，Flask等）设置后端服务器。
在后端服务器上定义一个路由来处理表单提交。例如，在Express.js中，您可以使用post方法为“/API/addDetails”端点定义路由。
在后端路由中提取从前端发送的表单数据。表单数据包括名称、说明和文件。
妥善处理文件上传。您可以使用文件上传库或手动处理它。如果选择手动处理，则需要处理上传的文件并将其保存到所需位置。
将表单数据（包括文件信息）存储在后端的存储或数据库中。
向前端发回一个响应，指示表单提交的成功或失败。

下面是一个使用Node.js和Express.js的示例实现：

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Set the destination folder for file uploads

app.post('/api/addDetails', upload.array('files'), (req, res) => {
  const { name, description } = req.body; // Extract the name and description from the form data
  const files = req.files; // Access the uploaded files

  // Process and save the files to your desired location
  // You can access each file's details using the `filename` and `path` properties

  // Store the form data and file information in your backend's storage or database

  res.status(200).json({ message: 'Form submitted successfully' });
});

app.listen(3000, () => {
  console.log('Backend server is running on port 3000');
});

赞(0）回复(0）举报 2023-06-22

我来回答

我怎么能上传数组的图像与其他形式的数据使用nextjs &保存数据到mongodb数据库和图像到cloudinary或localhost？

1条答案

相关问题

热门标签

最新问答