为什么我的函数在调用时没有定义？ [复制]答案

【问题标题】：Why is my function not defined when it's called? [duplicate]为什么我的函数在调用时没有定义？ [复制]
【发布时间】：2021-02-04 12:41:52
【问题描述】：

我正在尝试使用 JS SDK 在 Dropbox 上上传文件。这是我尝试调用函数的 html 代码：

<!DOCTYPE html>
<html>
<head>
    <script src="get_from_cin7.js"></script>
    <meta charset="utf-8" />
    <title>Dropbox JavaScript SDK</title>
    <!--<link rel="stylesheet" href="/styles.css">-->
</head>
<body>
    <form onSubmit="Dropupload()">
        <input type="file" id="file-upload" />
        <button type="submit">Submit</button>
      </form>
</body>
</html>

这是定义函数的文件

import { Dropbox } from 'dropbox';

const dbx = new Dropbox({
    accessToken: '<ACCESS TOKEN>', //I replaced it with my access token in the code
    fetch
});

function Dropupload() {
    var file = fileIput.files[0];
    dbx.filesUpload({path: '/' + file.name, contents: file})
    .then(function(response) {
        var results = document.getElementById('results');
        results.appendChild(document.createTextNode('File uploaded!'));
        document.write('MISSION COMPLETE');
      })
      .catch(function(error) {
        console.error(error);
        document.write('BETTER LUCK NEXT TIME');
      });
}

不过，由于某种我不知道的原因，我的函数无法调用。我收到错误“ReferenceError：Dropupload is not defined”，我不知道这是否与问题有关，但我收到另一个错误：“SyntaxError：导入声明可能只出现在模块的顶层”。

我只是要测试上传，所以这就是现在的全部代码。

这到底是什么问题？

【问题讨论】：

您在这里一个接一个地排列了大约三个不同的问题。查看重复项。

标签： javascript dropbox

【解决方案1】：

您在script 标签中忘记了type="module"。如果不这样做，ES6 模块语法将无法工作。

您还需要将Dropupload附加到window，否则它是模块本地的。

window.Dropupload = function() {
  var file = fileIput.files[0];
  ...

【讨论】：

这不会解决问题，因为Dropupload 将是模块本地的，并且在onsubmit 属性中无法访问
谢谢，我没有第二个错误了，但主要问题仍然存在，我收到了一个新错误：“TypeError: Error resolve module specifier: dropbox”
@R-son — 在import { Dropbox } from 'dropbox'; 中，dropbox 需要是您的 JS 文件的 URL。您不能使用 Node.js 模块解析速记。
他的意思是 'dropbox' 将解析到 Node.js 环境中正确的 node_modules 路径。在浏览器环境中，它需要是 JS 文件的 URL。
谢谢 Guerric。我明白了，我仍然不知道在哪里可以找到该网址，但我会尝试自己找到它