使用 nextjs Api 路由将图像上传到服务器

Question

大家好，我一直在尝试使用 Nextjs 将图像从输入发送到我的 Api 我有问题我的服务器没有向我发送任何响应，或者更好地说它甚至没有发送到服务器首先我将数据发送到我的 Api 路由然后解析它之后再次发送到服务器我已经尝试了许多第三人称库我不知道我是否应该在 API Route 中解析我的数据

我的 uploadfile.js 组件

         import React, { useEffect } from "react";
         import { useRef } from "react";
         
         const CardProfile = (props) => {
           const { profile } = props;
           const fileUploader = useRef();
           const [dataBaseResponse, setDataBaseResponse] = React.useState({});
           const profileTrigger = (event) => {
             event.preventDefault();
             fileUploader.current.click();
           };
         
           const sendProfile =  async (event) => {
             console.log(fileUploader.current.files[0]);
             const formData = new FormData();
             formData.append("image", fileUploader.current.files[0]);
              fetch("/api/changeUserProfile", {
               method: "POST",
               body: formData,
             }).then(async (response) => {
               await response.json().then((data) => {
                 setDataBaseResponse({
                   message: data.message,
                   data,
                 });
                 console.log(dataBaseResponse);
               });
             });
             console.log(dataBaseResponse);
           };
               
           return (
             <div>
               <input
                 id="js-file-uploader"
                 ref={fileUploader}
                 onChange={sendProfile}
                 className={style.hidden}
                 name="profile-picture"
                 type="file"
                 accept="image/png, image/jpeg"
               />
            </div>
          );
        };
        
        export default CardProfile;

和我的 api 路线 /api/changeUserProfile.js

   import formidable from 'formidable';
   import FormData from "form-data";
   
   export const config = {
     api: {
       bodyParser: false,
     },
   };
   export default async function changeUserProfile(req, res) {
     if (req.method === "POST") {
       
       const form = new formidable.IncomingForm();
       form.keepExtensions = true;
       form.parse(req, (err, fields, files) => {
         console.log(files.image);
        const forms = new FormData();
       forms.append( "image", files.image );
       fetch("https://auth.megaverse.today/api/v1/user/uploadProfileImage", {
         method: "POST",
         headers: {
           Cookie: req.headers.cookie,
         },
         body: forms,
       })
         .then((response) => {
           response.json().then((data) => {
             res.json(data);
             console.log(data);
           });
         })
         .catch((err) => {
           console.log(err);
         });
       });      
       
     }
   }

我已经尝试过多方和强大但我无法上传它请帮助我找到我的问题

Answer 1

在强大的“如果目录不存在，上传的文件被默默丢弃”。 就我而言，强大的是在本地而不是在服务器上创建文件。 发生这种情况是因为开发和生产的上传目录路径不同。 在强大的你可以通过将uploadDir参数传递给强大的IncomingForm来更改上传目录。

const form = new formidable.IncomingForm({uploadDir: ${process.cwd()} });

另外，要查看强大的控制台日志中是否有错误，

form.parse(req, async function (err, fields, files) {
  if(err){
    console.log("err is:",err)
  }else{
      const data = fs.readFileSync(file.filepath);
      await fs.writeFile(`${location}/`+ file.originalFilename, data, ()=>console.log("writing done"))
  }
  return res.send({"status":200});
}
});