axios 在express服务器中未定义multer文件

zsbz8rwp  于 2023-10-18  发布在  iOS
关注(0)|答案(2)|浏览(122)

这是我的Axios帖子请求。

await axios
      .post(
        status === "register"
          ? "api/v1/publicUsers/register"
          : "api/v1/publicUsers/login",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (data) => {
            setProgress(Math.round((100 * data.loaded) / data.total));
            console.log(progress);
          },

          withCredentials: true,
        }
      )

这里是后端服务层,用于获取文件上传和其他表单数据。

module.exports.publicUsersService =
  (upload.any(),
  (req, res) => {
    console.log(req.files);
    console.log(req.body);
    }
    )

upload来自multerInstance文件,其中包含:

const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "../public/uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});
const upload = multer({ storage: storage });
module.exports = upload;

表单片段:

<form onSubmit={handleSubmit} encType="multipart/form-data">
            <input
              onChange={handleEmail}
              type="email"
              className="border-black border-2 mt-5 w-72 p-3"
              placeholder="Enter your email"
              name="email"
              id="email"
            />
            <br />
            <input
              onChange={handlePass}
              type="password"
              className="border-black border-2 mt-5 w-72 p-3"
              placeholder="Enter your password"
              name="password"
              id="password"
            />
            <br />
            {status === "register" && (
              <input
                onChange={handleFile}
                type="file"
                className="border-black border-2 mt-5 w-72 p-3"
                required={true}
                name="file"
                id="file"
              />
            )}
            <br />
            <div className="button flex justify-center bg-blue-600 mt-5 p-3">
              {status === "login" ? (
                <button className="">Login</button>
              ) : (
                <button className="">Register</button>
              )}
            </div>
          </form>

现在,当我提交我的表单时,我在req.filereq.body中没有得到任何数据。它们是未定义的。

hm2xizp9

hm2xizp91#

问题出在publicUsersService中间件功能上:multer处理程序永远不会被调用,因为你用括号/括号表达式定义了它,所以它解析为单个/最后一个处理程序(请参阅:Javascript expression in parentheses)。
你需要用方括号/数组来定义它,并在其中列出路由处理程序,以便它们可以被调用/链接,请参阅:路由处理程序。
变更:

module.exports.publicUsersService =
    (
        upload.any(),
        (req, res) => {
            console.log(req.files);
            console.log(req.body);
        }
    )

这是:

module.exports.publicUsersService =
    [
        upload.any(),
        (req, res) => {
            console.log(req.files);
            console.log(req.body);
        }
    ]
nzkunb0c

nzkunb0c2#

我将我的路由处理程序更新为:

publicUsersRouter
  .route("/register")
  .post(upload.single("file"), async (req, res) => {
        publicUsersService(req,res)
  }

相关问题