[英]Upload file with Primeng upload component
I would upload the file in Angular using upload component我会使用上传组件在 Angular 中上传文件
Here's my HTML:这是我的 HTML:
<p-fileUpload mode="basic" name="demo[]" customUpload="true" accept="image/*" maxFileSize="1000000" (uploadHandler)="upload($event)"></p-fileUpload>
in my ts I print param value在我的ts我打印参数值
upload(event) {
console.log(event)
}
I get only metadata and not blob content我只得到元数据而不是 blob 内容
{"files":[{"objectURL":{"changingThisBreaksApplicationSecurity":"blob:https://prime-ng-file-uploading.stackblitz.io/d429e761-c391-45fa-8628-39b603e25225"}}]}
I would also get file content to send via API to the server我还将获取文件内容以通过 API 发送到服务器
In the official documentation you have an example:在官方文档中,您有一个示例:
export class FileUploadDemo {
uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {}
onUpload(event) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({
severity: 'info',
summary: 'File Uploaded',
detail: ''
});
}
}
When I used primeNG
, I did it like this (for uploading only 1 file) :当我使用
primeNG
,我是这样做的(仅上传 1 个文件):
HTML
HTML
<p-fileUpload name="myfile[]" customUpload="true" multiple="multiple" (uploadHandler)="onUpload($event)" accept="application/pdf"></p-fileUpload>
component.ts
组件.ts
export class AlteracionFormComponent {
uplo: File;
constructor(private fileService: FileUploadClientService) {}
onUpload(event) {
for (let file of event.files) {
this.uplo = file;
}
this.uploadFileToActivity();
}
uploadFileToActivity() {
this.fileService.postFile(this.uplo).subscribe(data => {
alert('Success');
}, error => {
console.log(error);
});
}
}
And my service (in Angular
)还有我的服务(在
Angular
)
service.ts
服务.ts
postFile(id_alteracion: string, filesToUpload: FileUploadModel[], catalogacion: any): Observable<any> {
let url = urlAPIAlteraciones + '/';
url += id_alteracion + '/documentos';
const formData: FormData = new FormData();
formData.append('json', JSON.stringify(catalogacion));
for (let file of filesToUpload) {
formData.append('documento', file.data, file.data.name);
}
console.log(formData);
let headers = new HttpHeaders();
return this._http.post(url, formData, { headers: headers });
}
Hope that helps希望有帮助
I'm trying to use the standard PrimeNG approach for uploading multiple files at once.我正在尝试使用标准 PrimeNG 方法一次上传多个文件。
<p-fileUpload name="myfile[]" [url]="MyApiUrl" multiple="multiple"></p-fileUpload>
In my ApiController, I get the following:在我的 ApiController 中,我得到以下信息:
public List<FileModel> Post()
{
var files = HttpContext.Current.Request.Files;
var result = new List<FileModel>();
if (files.Count > 0)
{
Guid guid = Guid.NewGuid();
var path = System.IO.Path.Combine(System.Web.Configuration.WebConfigurationManager.AppSettings["UploadFileLocation"], guid.ToString() + "/");
System.Web.HttpContext.Current.Session["guid"] = guid;
if (!System.IO.Directory.Exists(path)) { System.IO.Directory.CreateDirectory(path); }
foreach (string fileName in files.AllKeys)
{
var file = files[fileName];
var filePath = path + file.FileName;
file.SaveAs(filePath);
result.Add(_data.InsertFile(FileModel.Create(path, file.FileName)));
}
}
return result;
}
The problem I'm having is that "fileName" in var file = files[fileName]
always equals the first file in the group of files uploaded.我遇到的问题是
var file = files[fileName]
中的“fileName”总是等于上传的文件组中的第一个文件。 I don't know if this is an issue with HttpContext.Current.Request.Files
or a PrimeNG bug.我不知道这是
HttpContext.Current.Request.Files
的问题还是 PrimeNG 错误。 Has anyone ran into this type of problem?有没有人遇到过这种类型的问题?
Doing it this way because I want to store the guid in my session and grab it later on when the form is submitted...这样做是因为我想将 guid 存储在我的会话中,并在稍后提交表单时获取它...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.