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

Question

我正在尝试通过自定义网站将 large.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，它就会开始抛出这些错误。 不知道发生了什么。 任何帮助，将不胜感激！

Answer 1

我想到了！

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

您将一直遵循该步骤，直到创建client的第 3 步，然后将 object 用于这些大文件上传功能： https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/docs/任务/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;
    }
}