如何使用FormData將文件和數據數組發送到API服務器

Question

我有一個angular 6的fileUploader組件，在服務器端使用Asp.Net Core 2.0 。 由於我的文件很大，因此我使用FormData 。

我可以很好地將帶有數據的文件發送到服務器。 使用此代碼：

零件：

export class AttComponent implements OnInit
{
    constructor(private attService: AttService) { }
    uploadFile()
    {
        var entity = {};
            entity.ID = 123;
            entity.ATT_ID = 456;
            entity.REFERENCE_TYPE = "referenceType";
            entity.REFRENCE_ID = "referenceID";

        this.attService.UploadFile(fileUploader.files[0], entity).subscribe((data: IServiceResult) =>
                {
                    console.log("fileUploader result => ", data);
                });
    }
}

服務：

@Injectable()
export class AttService
{
    UploadFile(file, entity: any): Observable<any> 
    {
            var formData = new FormData();
            formData.append('file', file);
            formData.append('att', JSON.stringify(entity));
            return this.http.Post("/UploadFile", formData);
    }
}

Api服務器：

public async Task<IActionResult> UploadFile(AttDTO model)
{
    //...
}

DTO類別：

public class AttDTO
    {
        public IFormFile file { get; set; }
        public string att { get; set; }
    }

我需要使用FormData帶有數據 的文件數組發送到服務器。 像這樣在server ：

服務器：

public async Task<IActionResult> UploadFile(List<AttDTO> obj)
{
    //...
}

服務

uploadFile(lst: Array<any>): Observable<any>
    {
        var formData = new FormData();
        lst.forEach(item =>
        {
            formData.append('file', item.fILE);
            formData.append('att', JSON.stringify(item.att));
        });
        return this.http.Post("/UploadFile", formData);
    }

我該怎么辦？

客戶端（組件，服務）有什么變化？

誰能幫我？

Answer 1

嘗試下面的代碼。

零件：

                           Send all files
                            \/\/\/\/\/\/
this.attService.UploadFile(fileUploader.files, entity).subscribe((data:IServiceResult) => {
    console.log("fileUploader result => ", data);
});

UploadFile()方法：

UploadFile(files, entity: any): Observable<any> {
 let data: any[] = []
  this.foods.forEach(file => {
    var formData = new FormData();
    formData.append('file', item.fILE);
    formData.append('att', JSON.stringify(item.att));
    data.push(formData);
  });

 return this.http.Post("/UploadFile", data);
}

API方面的變更：

public class AttDTO
{
  public IFormFile file { get; set; }
  public string att { get; set; }
}

和方法：

public async Task<IActionResult> UploadFile(IList<AttDTO> obj)
{
    //...
}

Answer 2

一天后，我找到了解決方案。

遵循此：

服務：

將att對象移至after循環並強制轉換所有lst進行字符串化。 像這樣：

uploadFile(lst: Array<any>): Observable<any>
    {
        var formData = new FormData();
        lst.forEach(item =>
        {
            formData.append('file', item.fILE);
        });
        formData.append('att', JSON.stringify(lst));
        return this.http.Post("/UploadFile", formData);
    }

在服務器端

我從Request.Form接收數據，而不是parameter 。 像這樣：

[HttpPost]
        public async Task<IActionResult> UploadFile()
        {
            var att = Request.Form.ToDictionary(x => x.Key, x => x.Value.ToString())["att"];
            var json = (JArray)Newtonsoft.Json.JsonConvert.DeserializeObject(att);

            List<AttDTO> lst = new List<AttDTO>();

            int i = 0;
            foreach (var item in json.Children())
            {
                lst.Add(new AttDTO() { att = item.ToString(), file = Request.Form.Files[i] });
                ++i;
            }
            // ...
        }

我希望是有用的。