使用 node.js 将文件上传到 FTP 服务器需要文件的完整目录路径，该文件不可用

Question

我是 js/reactjs/nodejs 的新手，我正在实现一项功能，允许用户手动选择文件并将其上传到test local ftp server （在目录/test) 。 我遇到的问题是ftp.upload函数需要一个String作为上传文件的完整路径，但我没有明确给出路径，因为该文件是通过“浏览文件”按钮选择的。

如果我在没有 ftp（本地）的情况下进行测试，它可以完美运行，但我似乎无法将请求中的文件上传到 FTP 服务器。 如果我向要上传的文件添加完整路径，它似乎可以工作，但这会破坏choosing a file to upload and uploading after clicking on Upload的目的

这是 server.js

const express = require("express");
const fileUpload = require("express-fileupload");
const app = express();
var EasyFtp = require("easy-ftp");
var ftp = new EasyFtp();

app.use(fileUpload());

var config = {
  host: "127.0.0.1",
  type: "FTP",
  port: "",
  username: "admin",
  password: "",
};

ftp.connect(config);

app.post("/upload", (req, res) => {
  console.log(req.files);
  if (req.files === null) {
    return res.status(400).json({ msg: "No file was uploaded" }); //no file uploaded
  }
  const file = req.files.file;

  ftp.upload(file, "/test", function (err) {
    if (err) {
      console.log(err);
      return res.status(500).send(err);
    } else {
      console.log("finished:", res);
      res.json({ fileName: file.name, filePath: `/upload/${file.name}` });
    }
  });

  //   res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });
});
  ftp.mv(
`/test/(${
  (file.tempFilePath.split("/").at(-1),
  file.name,
  function (err, newPath) {})
})`
  );

ftp.close();
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`server started on port ${PORT}`));

这是文件上传文件

import React, { Fragment, useState } from "react";
import axios from "axios";
import Message from "./Message";
import Progress from "./Progress";

const FileUpload = () => {
  //actual file and filename should go into state because the label "Choose File" needs to be replaced with the actual filename

  const [files, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File...");
  const [uploadedFiles, setUploadedFiles] = useState({});
  const [message, setMessage] = useState("");
  const [uploadPercent, setUploadPercent] = useState(0);

  const onChange = (e) => {
    setFile(e.target.files[0]);
    let x = [];
    for (let file of e.target.files) {
      x.push(file.name);
    }
    setFilename(x);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    //add the file to form data
    const formData = new FormData();
    formData.append("file", files);
    try {
      const response = await axios.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },

        //progress bar for upload
        onUploadProgress: (progressEvent) => {
          setUploadPercent(
            parseInt(
              //get rid of progress bar after 10 seconds of finished upload
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );
          setTimeout(() => setUploadPercent(0), 1000);
        },
        //clear loaded percentage bar
      });
      const { fileName, filePath } = response.data;

      setUploadedFiles({ fileName, filePath });
      setMessage("File uploaded successfully");
    } catch (error) {
      if (error.response.status === 500) {
        setMessage("There was a problem with the server, please try again.");
      } else {
        setMessage(error.response.data.msg);
      }
    }
  };

  return (
    <Fragment>
      {message ? <Message msg={message} /> : null}
      <form onSubmit={onSubmit}>
        <div className="custom-file">
          <input
            type="file"
            className="custom-file-input"
            id="customFile"
            onChange={onChange}
            multiple
          />
          <label className="custom-file-label" htmlFor="customFile">
            {filename}
          </label>
        </div>
        <Progress percentage={uploadPercent} />
        <input
          type="submit"
          value="Upload"
          className="btn btn-primary btn-block mt-4"
        />
      </form>
    </Fragment>
  );
};

export default FileUpload;

有什么办法可以纠正这个吗？ 我错过了什么？ 如果需要更多代码片段，请告诉我！

更新！！

---

ftp.mv 什么也没做

app.post("/upload", (req, res) => {
  console.log(req.files);
  if (req.files === null) {
    return res.status(400).json({ msg: "No file was uploaded" }); //error message if no file was uploaded
  }

  const file = req.files.file;
  const tempFileName = file.tempFilePath.split("/").at(-1);

  ftp.upload(file.tempFilePath, "/test", function (err) {
    if (err) {
      console.log(err);
      return res.status(500).send(err);
    } else {
      console.log("finished:", res);
      res.json({
        fileName: file.name,
        filePath: `/uploads/${file.name}`,
      });
    }
  });
  ftp.mv(`/test/${tempFileName}`, "abc", function (err, newPath) {});
  ftp.close();
});

Answer 1

您正在向服务器发送文件，您需要暂时保存并从那里上传，首先将您的 fileUpload 配置更改为：

    app.use(fileUpload({
      useTempFiles : true,
      tempFileDir : '/tmp/'
    }));

然后您可以通过访问其临时文件路径来上传文件：

app.post("/upload", (req, res) => {
  console.log(req.files);
  if (req.files === null) {
    return res.status(400).json({ msg: "No file was uploaded" }); //no file uploaded
  }
  const file = req.files.file;
  // here we access the temporary file path
  ftp.upload(file.tempFilePath, "/test", function (err) {
    if (err) {
      console.log(err);
      return res.status(500).send(err);
    } else {
      console.log("finished:", res);
      res.json({ fileName: file.name, filePath: `/upload/${file.name}` });
    }
    ftp.close();
  });

 });
});