使用Primeng上传组件上传文件答案

【问题标题】：Upload file with Primeng upload component使用Primeng上传组件上传文件
【发布时间】：2019-02-16 22:28:17
【问题描述】：

我会使用 upload component 在 Angular 中上传文件

这是我的 HTML：

<p-fileUpload mode="basic" name="demo[]" customUpload="true" accept="image/*" maxFileSize="1000000"  (uploadHandler)="upload($event)"></p-fileUpload>

在我的 ts 我打印参数值

upload(event) {
  console.log(event)
}

我只得到元数据而不是 blob 内容

{"files":[{"objectURL":{"changingThisBreaksApplicationSecurity":"blob:https://prime-ng-file-uploading.stackblitz.io/d429e761-c391-45fa-8628-39b603e25225"}}]}

我还将获取文件内容以通过 API 发送到服务器

Here's a stackblitz demo

【问题讨论】：

标签： javascript angular typescript primeng

【解决方案1】：

在官方文档中你有一个例子：

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: ''
    });
  }
}

当我使用primeNG时，我是这样做的（仅上传1个文件）：

HTML

 <p-fileUpload name="myfile[]" customUpload="true" multiple="multiple" (uploadHandler)="onUpload($event)" accept="application/pdf"></p-fileUpload>

组件.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);
    });
  }
}

还有我的服务（Angular）

service.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 });
  }

希望有帮助

【讨论】：

可以添加HTML吗？
是的，我添加了它
我已经尝试过你的例子，当我在追加行之后 console.log formData 时，我得到了空的内容。我应该拥有什么？
如果在post方法中记录入参会收到什么？我将我的 POST 代码更新为我正在使用的当前版本。我记录了表单，它是空的，但我的文件可以很好地传输到 bbdd
我已经使用formData.get("keyvalue") 获取formData 内容。

【解决方案2】：

我正在尝试使用标准 PrimeNG 方法一次上传多个文件。

<p-fileUpload name="myfile[]" [url]="MyApiUrl" multiple="multiple"></p-fileUpload>

在我的 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;
}

我遇到的问题是var file = files[fileName] 中的“fileName”总是等于上传文件组中的第一个文件。我不知道这是 HttpContext.Current.Request.Files 的问题还是 PrimeNG 错误。有人遇到过这种问题吗？

这样做是因为我想将 guid 存储在我的会话中，然后在提交表单时获取它...

【讨论】：

您在“回答”中提问。最好以“问题”的形式提问 - 这样大家就可以回答了。