使用 Javascript 将大数据文件上传到 OneDrive答案

【问题标题】：Uploading Large Data files to OneDrive with Javascript使用 Javascript 将大数据文件上传到 OneDrive
【发布时间】：2020-08-08 17:59:32
【问题描述】：

我正在尝试通过自定义网站将大型 .zip 文件保存到 OneDrive 文件夹，并且我能够保存较小的文件，但是当我尝试上传较大的文件时，它会一直通过上传过程（最多上传 100%），但最后给了我两个错误。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Data Entry Form</title>
    <script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
</head>

<body>
    <script type="text/javascript">
        function launchSaveToOneDrive() {
            var odOptions = {
                clientId: "[the application id]",
                action: "save",
                sourceInputElementId: "fileUploadControl",
                openInNewWindow: true,
                advanced: {},
                success: function(files) { console.log("Success!") },
                progress: function(percent) { console.log(percent) },
                cancel: function() { console.log("Canceled") },
                error: function(error) { console.log(error) }
            }
            OneDrive.save(odOptions);
        }
    </script>

    <input id="fileUploadControl" name="fileUploadControl" type="file" />
    <button onclick="launchSaveToOneDrive()">Save to OneDrive</button>

</body>
</html>

然后它抛出这两个错误：

Access to XMLHttpRequest at 'https://graph.microsoft.com/[...]' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

PUT https://graph.microsoft.com/[...] net::ERR_FAILED

似乎是文件大小的问题？我可以上传小文件（包括小 zip 文件），但是一旦超过 2-4 MB，它就会开始抛出这些错误。不知道发生了什么。任何帮助将不胜感激！

【问题讨论】：

标签： javascript file upload onedrive large-files

【解决方案1】：

我想通了！

首先，您将按照以下文档（我很难找到）创建一个客户端：https://github.com/microsoftgraph/msgraph-sdk-javascript

您将按照此操作直到第 3 步创建 client，然后将该对象用于这些大文件上传功能：https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/docs/tasks/LargeFileUploadTask.md

总而言之，它看起来像这样（从文档中复制和粘贴）：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>
<script type="text/javascript" src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.min.js"></script>

const msalConfig = {
    auth: {
        clientId: "[client id]", // Client Id of the registered application
        redirectUri: "[redirect uri]",
    },
};
const graphScopes = [...]; // An array of graph scopes

// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
const msalApplication = new Msal.UserAgentApplication(msalConfig);
const authenticationOptions = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new MicrosoftGraph.ImplicitMSALAuthenticationProvider(msalApplication, authenticationOptions);

const clientOptions = {
    authProvider,
};
const microGrphClient = MicrosoftGraph.Client;
const client = Client.initWithMiddleware(clientOptions);

async function fileUpload() {
    console.log("Uploading...")
    let file = document.getElementById("fileInput").files[0];
    try {
        let response = await largeFileUpload(client, file, file.name);
        console.log(response);
        console.log("File Uploaded Successfully!!");
    } catch (error) {
        console.error(error);
    }
}

async function largeFileUpload(client, file) {
    try {
        let options = {
            path: "/desired upload path",
            fileName: file.name,
            rangeSize: 1024 * 1024,
        };
        const uploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask.create(client, file, options);
        const response = await uploadTask.upload();
        return response;
    } catch (err) {
        throw err;
    }
}

【讨论】：

对 TypeScript 执行相同操作时，MicrosoftGraph.OneDriveLargeFileUploadTask 在“import * as MicrosoftGraph from "@microsoft/microsoft-graph-types" 中不存在”知道它来自哪里吗？谢谢