Question

我试过这个php和html文件上传： https://www.w3schools.com/php/php_file_upload.asp

我想知道如果使用React.js / Nodes.js可以完成同样的工作。我之前并没有真正习惯编码，也从未使用过React.js。

Answer 1

您可以将其拆分为部分：在Node.js中完成的后端部分。因此，您可以使用ExpressJS之类的东西作为框架。添加POST路由并处理文件上传。

第二部分是React。 React与后端系统无关。它仅用于构建GUI。它是花哨的HTML和JavaScript的结合。

Answer 2

如果您想知道处理此过程的复杂性，这里有一段代码，它使用强大的包来处理Node.JS中的文件上传

  /** UPLOAD a file **/
  app.post('/upload', isLoggedIn, (req, res) => {
    // create an incoming form object
    var form = new formidable.IncomingForm();

    // specify that we want to allow the user to upload multiple files in a single request
    form.multiples = true;

    // store all uploads in the /uploads directory
    form.uploadDir = path.join(__dirname, '../../uploads');

    // every time a file has been uploaded successfully,
    // rename it to it's orignal name
    form.on('file', function(field, file) {
      logger.info(`Uploaded: "${file.name}"`);
      fs.rename(file.path, path.join(form.uploadDir, file.name));
    });

    // log any errors that occur
    form.on('error', function(err) {
      errorLogger.error('During file upload: ' + err);
    });

    // once all the files have been uploaded, send a response to the client
    form.on('end', function() {
      res.end('success');
    });

    // parse the incoming request containing the form data
    form.parse(req);
  });

我的特定客户端实现没有使用React，只是使用jQuery Dropzone插件的简单HTML / Javascript页面，但我发现React有上传器包以及“react-dropzone”。

Here是返回完成示例存储库的链接，用于完成node.js中的文件上载。签出upload.js文件以查看如何向节点服务器完成客户端文件流。

如何使用React.js和Node.js将文件上传到本地文件夹？

2 个答案: