Question

我有一个fileUploader的{{1}}组件，在服务器端我使用了angular 6。由于我的文件很大，因此我使用Asp.Net Core 2.0。

我可以很好地将 a 文件和数据发送到服务器。使用以下代码：

组件：

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

Api服务器：

@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);
    }
}

DTO类：

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

我需要将带有数据的文件数组发送到具有public class AttDTO { public IFormFile file { get; set; } public string att { get; set; } }的服务器。在FormData中是这样的：

服务器：

server

服务

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

我该怎么办？

客户端（组件，服务）有什么变化？

有人可以帮助我吗？

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;
            }
            // ...
        }

我希望是有用的。

如何使用FormData将文件和数据数组发送到API服务器

2 个答案: