为什么在调用我的函数时未定义它？

问题描述

我正在尝试使用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”，并且我不知道是否与该问题有关，但是又收到另一个错误：“ SyntaxError：导入声明可能仅出现在模块的顶层”。 / p>

我将要测试上传，所以现在是完整的代码。

这里到底是什么问题？

解决方法

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

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

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