如何从 HTML 调用 NodeJS 函数？答案

【问题标题】：How to call a NodeJS function from HTML?如何从 HTML 调用 NodeJS 函数？
【发布时间】：2022-02-17 10:11:57
【问题描述】：

我正在尝试创建一个将新文件添加到 AWS 中的 S3 存储桶中的函数。该函数在 NodeJS 中工作。

const AWS = require('aws-sdk');
AWS.config.update({region: 'us-east-2'});
s3 = new AWS.S3({apiVersion: '2006-03-01'});

// call S3 to retrieve upload file to specified bucket
const file = "file.png";
const uploadParams = {Bucket: "uploads", Key: '', Body: ''};

const fs = require('fs');
const fileStream = fs.createReadStream(file);
fileStream.on('error', function(err) {
  console.log('File Error', err);
});
uploadParams.Body = fileStream;
const path = require('path');
uploadParams.Key = path.basename(file);

s3.upload (uploadParams, function (err, data) {
  if (err) {
    console.log("Error", err);
  } if (data) {
    console.log("Upload Success", data.Location);
  }
});

我现在要做的是获取此代码并使其在以 HTML 格式上传文件时执行。我有一个简单的 HTML 脚本，用户可以在其中上传文件，我希望在按下提交按钮时执行上述代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <form action="javascript:loadAPI(document.getElementByID('fileUpload'))">
      <label>Upload a file to AWS S3</label>
      <input type="file" id="fileUpload" name="filename">
      <input type="submit">
    </form>
    <script type="text/javascript" src="apiFunction.js">
  </script>
  </body>
</html>

问题是，如果我将节点函数放在 loadAPI 中，我会收到以下错误。

Uncaught ReferenceError: require is not defined

有谁知道我如何在 HTML 中使用这个功能？

【问题讨论】：

Node是一个javascrip运行时，浏览器也提供了一个不同运行时。它们不能直接互换。他们都使用 javascript 作为语言，但 API 不同。
如果没有像使用 WebContainers 这样的大量帮助，nodeJS 无法在浏览器中运行。或者，您可以在服务器上运行 nodeJS 部分，例如 AWS Lambda，并通过一些 REST API 调用它。

标签： javascript html node.js amazon-web-services amazon-s3

【解决方案1】：

Uncaught ReferenceError: require is not defined

您收到此错误是因为require 函数是CommonJS 中使用的主要导入函数。 AWS 开发工具包不适用于 browser-side 使用。在客户端应用程序上使用它还需要 HTML 文件使用 AWS 凭证，并可能在公共互联网上公开它们，这可能是一个安全风险。

解决将文件上传到 S3 的要求的更好方法是使用 S3 预签名 URL。您可以使用此AWS guide 作为起点，然后查看此blog，了解如何在客户端应用程序上实现它。

【讨论】：