NodeJS 向服务器发送文件的问题

bmvo0sr5  于 2023-06-22  发布在  Node.js
关注(0)|答案(1)|浏览(164)

有一个小的表单,带有一个选择文件的输入和一个发送按钮

<form enctype="multipart/form-data">
        <input type="file" id="fileInput" />
        <button type="button" onclick="uploadFile()">Send</button>
 </form>

函数相应地发送

function uploadFile() {
          var input = document.getElementById("fileInput");
          var file = input.files[0];
          var formData = new FormData();
          formData.append("file", file);
  
          fetch("http://127.0.0.1:5000/api/fileupload", {
            method: "POST",
            body: formData,
            headers: {
              "Content-Type": "multipart/form-data",
     
            },
          })
            .then((response) => {
              if (response.ok) {
                console.log(JSON.stringify(response));
              }
            })
            .catch((error) => {
              console.error( error);
            });
        }

存在用于处理请求的路由

const app = express();

const PORT = config.get("PORT");

app.use(fileUpload());
app.use(express.json());
app.use(cors());
// app.use("/api/auth", authRouter);
// app.use("/api/file", fileRouter);
app.use("/api/fileupload", (req, res) => {
  if (req.files && req.files.hasOwnProperty("file")) {
    const uploadedFile = req.files.file;
    console.log(uploadedFile.name)

  } else {
    res.status(400).send("File not found.");
  }
});

const start = async () => {
  try {
    await mongoose.connect(config.get("dbUrl"), {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    app.listen(PORT, () => {
      console.log("port", PORT);
    });
  } catch (error) {}
};

start();

问题是文件是从客户端发送的,但是服务器没有接收到它。我用的是windows10 + vs代码
我已经看了很多实现发送文件的选项,我将代码简化到最简单,但它并没有解决问题。

vlf7wbxs

vlf7wbxs1#

请求无效,您需要从请求中删除Content-Type标头。
试试这个:

fetch("http://127.0.0.1:5000/api/fileupload", {
    method: "POST",
    body: formData
  })

参见:
警告:当使用FormData提交POST请求时,使用XMLHttpRequest或Fetch_API与multipart/form-data Content-Type(例如:将文件和Blob上载到服务器时),不要在请求上显式设置Content-Type标头。这样做将阻止浏览器使用边界表达式设置Content-Type标头,该边界表达式将用于分隔请求主体中的表单字段。
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
此外,在服务器上,您的检查应该会抛出错误,因此在这种情况下,您需要更改属性检查:

if (req.files && Object.prototype.hasOwnProperty.call(req.files, 'file')) {

参见:hasOwnProperty is not a function in Node.js?
或者简单地说:

if(req.files?.file)

相关问题