如何发送文件的形式数据在接下来的Js?

Question

我已经在Node js中创建了一个用于文件上传的API。邮差工作得很好。

我用Next Js做了一个上传Excel文件的表单。我可以在控制台中看到选定的文件。

但我不能在formdata设置文件。我在控制台中得到空的表单数据。

<div>
<input
class="form-control w-25"
multiple={false}
type="file"
id="ExcelFile"
onChange={uploadFile}
required
></input>
{/* </label> */}
<button
type="button"
// disabled={!selectedImage}
class="btn btn-primary "
>
ADD SOLUTION
</button>
</div>

const uploadFile = ({ target: { files } }) => {
console.log(files[0]);
// let data = new formData();
let FilesData = new FormData();
FilesData.append("excel_file", files[0]);
console.log("Files in multipart");
console.log(FilesData);
// data.append("file", files[0]);
};

https://codesandbox.io/embed/next-js-forked-th22n?fontsize=14& hidenavigation = 1,黑暗主题=

Answer 1

这里有一个关于next.js中使用multer解析表单数据的简单表单提交的小示例。

客户这是客户端页面，包含一个超级简单的HTML表单(也可以没有JS工作)

// pages/my-form.ts
export default function Page() {
return (
<div>
<form id="data" method="post" action='/api/on-form-submit' encType="multipart/form-data">
<input name="title" label="Title"/>
<input name="video" label="Video"/>
<button type="submit">Submit</button>
</form>
</div>
);
};

服务器

这是服务器函数接收表单提交。

// pages/api/on-form-submit.ts
import multer from "multer";
import { NextApiRequest, NextApiResponse } from "next";
async function parseFormData(
req: NextApiRequest & { files?: any },
res: NextApiResponse
) {
const storage = multer.memoryStorage();
const multerUpload = multer({ storage });
const multerFiles = multerUpload.any();
await new Promise((resolve, reject) => {
multerFiles(req as any, res as any, (result: any) => {
if (result instanceof Error) {
return reject(result);
}
return resolve(result);
});
});
return {
fields: req.body,
files: req.files
}
}
// IMPORTANT: Prevents next from trying to parse the form
export const config = {
api: {
bodyParser: false,
},
};
const Handler: NextApiHandler = async (req, res) => {
const result = await parseFormData(req, res);
console.log(result);
res.status(200).redirect('/success-page');
}
export default Handler;

Answer 2

如果您尝试console.logFormData对象，您将只得到空对象。相反，您应该在FormData对象上调用entries方法。

for (const pair of FilesData.entries()){
console.log(pair)
}

返回键值对的arrays列表。

Answer 3

注意，您无法在console.log中看到formData如果你想用formData传递数据，你必须在你的服务器中使用这样一个中间件:https://nextjs.org/docs/api-routes/api-middlewares我只举一个可能有用的例子:in your formData:

var FormData = require("form-data");
let data = new FormData()
data.append("urlOrContent", urlOrContent)

，然后在服务器端发送formData在您的服务器端:

import middleware from "./middleware/middleware";
import nextConnect from "next-connect";
const handler = nextConnect();
handler.use(middleware);
handler.post(async (req, res) => {
//in formData: req.body.urlOrcontent[0]
try {
const response = await fetch(
req.body?.urlOrContent[0],
);
res.status(200).send({
data: {
message: "Success",
data: response.json(),
},
});
} catch (err) {
let e = {
func: "states.handler",
message: "خطای داخلی سرور رخ داده است!",
error: "Internal Server Error!",
code: 500,
};
res.status(500).json(e);
}
});
export const config = {
api: {
bodyParser: false,
},
};
export default handler;