问题描述
我在使用 PNP/SP 包上传和附加到 sharepoint 中的列表项时遇到了一些困难.我对输入文件组件没有太多经验,所以我认为我可能在文件上传 html 元素和将文件提交到 SharePoint Web 服务之间缺少一个步骤.
到目前为止,我已经尝试通过一些更改来遵循 PNP 示例 https://pnp.github.io/pnpjs/sp/docs/attachments/ 并尝试了一些不同的参数,但它们都倾向于导致 409 或 500 错误,一个错误提到它正在尝试 GET 请求而不是发布.
我的代码在下面,我明天到办公室时会发布完整的错误消息,但任何帮助将不胜感激.
private setButtonsEventHandlers(): void {让 fileUpload = document.getElementById("fileUploadInput")如果(文件上传){fileUpload.addEventListener('change', () => {this.uploadFiles(fileUpload);});}}私有异步上传文件(文件上传){让文件 = fileUpload.files[0];让attachmentsArray = this.state.attachmentsToUpload;让_web = new Web(this.props.wpContext.pageContext.site.absoluteUrl);让_listItem;let listUrlSplit: string[] = this.props.listUrl.split("/");让 listName: string = listUrlSplit[listUrlSplit.length-1];_listItem = 等待 _web.lists.getByTitle(listName).items.getById(this.props.id);让attachmentUpload = await _listItem.attachmentFiles.add(file.name,file)}
我通过用字符串替换我的文件上传来测试代码(如下)并且它确实有效,所以我认为我的错误在于误解了输入文件元素
let attachmentUpload = await _listItem.attachmentFiles.add("Testfile.txt","这是测试内容")
提前谢谢大家,享受周日剩下的一切;)
安迪
这是我的简单测试演示(React 框架).
组件 .tsx
<input type='file' id='fileUploadInput' name='myfile'/><span className={styles.title }>欢迎使用 SharePoint!</span><p className={styles.subTitle }>使用 Web 部件自定义 SharePoint 体验.</p><p className={styles.description }>{escape(this.props.description)}</p><a href="https://aka.ms/spfx" className={styles.button }><span className={styles.label }>了解详情</span></a>
webpart.ts
public render(): void {const 元素:React.ReactElement<IPnpspUploadAttachementProps>= React.createElement(Pnpsp上传附件,{描述:this.properties.description});ReactDom.render(element, this.domElement);this.setButtonsEventHandlers();}私有 setButtonsEventHandlers(): void {让 fileUpload = document.getElementById("fileUploadInput")如果(文件上传){fileUpload.addEventListener('change', () => {this.uploadFiles(fileUpload);});}}私有异步上传文件(文件上传){让文件 = fileUpload.files[0];//让attachmentsArray = this.state.attachmentsToUpload;让 item = sp.web.lists.getByTitle("MyList").items.getById(15);item.attachmentFiles.add(file.name,file).then(v => {控制台日志(v);});//让attachmentUpload = await _listItem.attachmentFiles.add(file.name,file)}
I am having some difficulty upload and attachment to a list item in sharepoint using the PNP/SP package. I dont have much experience with the input file component so I think I may be missing a step between the file upload html element and submitting the file to the SharePoint web service.
So far I've tried to follewing the PNP example with a few changes https://pnp.github.io/pnpjs/sp/docs/attachments/ and tried a few different arguments but they all tend to result in 409 or 500 errors, one error mentions that it's attempting a GET request instead of post.
My code is below and i'll post full error messages when i get into the office tomorrow but any help would be greatly appreciated.
private setButtonsEventHandlers(): void {
let fileUpload = document.getElementById("fileUploadInput")
if(fileUpload) {
fileUpload.addEventListener('change', () => {
this.uploadFiles(fileUpload);
});
}
}
private async uploadFiles(fileUpload) {
let file = fileUpload.files[0];
let attachmentsArray = this.state.attachmentsToUpload;
let _web = new Web(this.props.wpContext.pageContext.site.absoluteUrl);
let _listItem;
let listUrlSplit: string[] = this.props.listUrl.split("/");
let listName: string = listUrlSplit[listUrlSplit.length-1];
_listItem = await _web.lists.getByTitle(listName).items.getById(this.props.id);
let attachmentUpload = await _listItem.attachmentFiles.add(file.name,file)
}
I tested the code (below) by replacing my file upload with strings and it does work so I think my error is in misunderstanding the input file element
let attachmentUpload = await _listItem.attachmentFiles.add("Testfile.txt","This is test content")
Thanks in advance all and enjoy whats left of sunday ;)
Andy
Here is my simple test demo which works(React framework).
Component .tsx
<div className={ styles.column }>
<input type='file' id='fileUploadInput' name='myfile'/>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
webpart.ts
public render(): void {
const element: React.ReactElement<IPnpspUploadAttachementProps > = React.createElement(
PnpspUploadAttachement,
{
description: this.properties.description
}
);
ReactDom.render(element, this.domElement);
this.setButtonsEventHandlers();
}
private setButtonsEventHandlers(): void {
let fileUpload = document.getElementById("fileUploadInput")
if(fileUpload) {
fileUpload.addEventListener('change', () => {
this.uploadFiles(fileUpload);
});
}
}
private async uploadFiles(fileUpload) {
let file = fileUpload.files[0];
//let attachmentsArray = this.state.attachmentsToUpload;
let item = sp.web.lists.getByTitle("MyList").items.getById(15);
item.attachmentFiles.add(file.name,file).then(v => {
console.log(v);
});
//let attachmentUpload = await _listItem.attachmentFiles.add(file.name,file)
}
这篇关于SPFx 上传和添加附件到列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!