httpclient - 在 spfx webpart 中使用 SPHttpClient 将文件上传到 SharePoint Online
问题描述
我正在尝试在 spfx webpart 中使用 SPHttpClient 上传文件。
我正在尝试的代码是
const spOpts:ISPHttpClientOptions={body: { my: "bodyJson" } };
contextDetails.spHttpClient.post(url,SPHttpClient.configurations.v1, spOpts)
.then(response => {
return response;
})
.then(json => {
return json;
}) as Promise<any>
但我不确定如何将文件内容添加到这个 httpClient API。
我想我们必须在 body 参数中将文件内容添加到 spOpts 中。不过我不确定。
任何帮助表示赞赏。谢谢。
解决方案
假设您正在使用并输入文件标签,如下所示:
<input type="file" id="uploadFile" value="Upload File" />
<input type="button" class="uploadButton" value="Upload" />
然后,您可以注册 uploadButton 的处理程序,如下所示:
private setButtonsEventHandlers(): void {
this.domElement.getElementsByClassName('uploadButton')[0].
addEventListener('click', () => { this.UploadFiles(); });
}
现在,在该UploadFiles
方法中,您可以添加文件的内容和其他必要的标题。此外,假设您要将文件上传到文档库,您可以使用以下代码段将文件上传到其中。根据您的站点 url 和 doc lib 名称对其进行修改:
var files = (<HTMLInputElement>document.getElementById('uploadFile')).files;
//in case of multiple files,iterate or else upload the first file.
var file = files[0];
if (file != undefined || file != null) {
let spOpts : ISPHttpClientOptions = {
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: file
};
var url = `https://<your-site-url>/_api/Web/Lists/getByTitle('Documents')/RootFolder/Files/Add(url='${file.name}', overwrite=true)`
this.context.spHttpClient.post(url, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {
console.log(`Status code: ${response.status}`);
console.log(`Status text: ${response.statusText}`);
response.json().then((responseJSON: JSON) => {
console.log(responseJSON);
});
});
}
推荐阅读
- c# - WPF:DataGrid 上的水平 ScrollViewer 在绑定 ObservableCollection 的重新实例化时捕捉到右侧
- php - 如何使用带有 HTML 值作为简码属性的 HTML 创建简码?
- android - 为什么会抛出空对象引用上的 androidx.collection.SparseArrayCompat.size()
- java - 如何同时显示 2 个不同的面板?
- javascript - 在空白处插入内容控件
- jquery - angular中的Arborjs,如何在* .component.ts中连接和使用?
- flutter - 如何设置列表
在正文 http.post - nginx - 414 在 Kubernetes 上使用 Nginx Ingress 请求 URI 太长
- c - 使用主入口点将 HINSTANCE 传递给 WNDCLASS
- oracle - 缺少右括号 - Oracle 12c