练习 - 上传用户文件

3 分钟

下面是将上传功能添加到应用的步骤。

显示用于上传的浏览器输入元素和事件处理程序

打开 index.html 文件。

找到行 <ul id="downloadLinks"></ul> 并紧接着添加以下标记：

<!-- Add for file upload -->
<hr />
<input type="file" onchange="fileSelected(this);" />
<div id="uploadMessage"></div>

生成的 <div> 内容文本块应如下所示:

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <!-- Add for file download -->
  <hr />
  <label>Files in your OneDrive root folder:</label>
  <ul id="downloadLinks"></ul>
  <!-- Add for file upload -->
  <hr />
  <input type="file" onchange="fileSelected(this);" />
  <div id="uploadMessage"></div>
</div>

现在，在代码编辑器中打开 ui.js 文件，将以下代码添加到文件的末尾：

function fileSelected(e) {
  displayUploadMessage(`Uploading ${e.files[0].name}...`);
  uploadFile(e.files[0])
  .then((response) => {
    displayUploadMessage(`File ${response.name} of ${response.size} bytes uploaded`);
    displayFiles();
  });
}

function displayUploadMessage(message) {
    const messageElement = document.getElementById('uploadMessage');
    messageElement.innerText = message;
}

使用 Microsoft Graph SDK 添加可上传文件的函数

在代码编辑器中打开 graph.js 文件。

在文件底部添加此函数：

async function uploadFile(file) {
  try {
    ensureScope('files.readwrite');
    let options = {
        path: "/",
        fileName: file.name,
        rangeSize: 1024 * 1024 // must be a multiple of 320 KiB
    };
    const uploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask
        .create(graphClient, file, options);
    const response = await uploadTask.upload();
    console.log(`File ${response.name} of ${response.size} bytes uploaded`);
    return response;
  } catch (error) {
    console.error(error);
  }
}