多个表单数据文件上传参数

Question

我想在客户端使用 ng2-file-upload 组件，到目前为止一切正常，但现在我必须为每个包含文件附加标识符的文件传递一个附加参数。我尝试在 TypeScript 中设置 FileUploader 对象的附加参数属性：

this.uploader.options.additionalParameter = {"issueId": result.data.id};

在服务器上，我有以下可用的方法，但我没有获得上面设置的附加参数 (issueId)。 (.NET 核心 2.0)

public RequestResultModel File(IFormFile file);

请求有效载荷包含参数，但在新的表单数据中：

------WebKitFormBoundaryegtYAcYfO3gKdk9Z
Content-Disposition: form-data; name="file"; filename="81980085.pdf"
Content-Type: application/pdf


------WebKitFormBoundaryegtYAcYfO3gKdk9Z
Content-Disposition: form-data; name="issueId"

19
------WebKitFormBoundaryegtYAcYfO3gKdk9Z--

如何修改控制器方法以便同时读取 issueId 参数？在之前的项目中，我使用了第二个参数 public async Task<ApiResultBase> Upload(IFormFile file, string projectid) 并且它起作用了，但现在我想使用这个客户端组件，因为我不想拖放拖放而且我很懒惰。我试图在初始化后更改组件的 POST url (this.uploader.options.url = "/api/Issue/File/"+result.data.id;) 但它试图 POST 到原始地址。

Answer 1

您已经步入正轨。我有一个稍微不同的方法，你可以尝试 out.On 客户端，尝试类似的东西：

this.uploader = new FileUploader({
            url: url,//The enpoint you are consuming
            additionalParameter: {
                issueId: result.data.id //your parameter-remove quotes
            },
            headers: [{ name: 'Accept', value: 'application/json' }],//your custom header
            //autoUpload: true, //configure autoUpload
        });

该库还有 onErrorItem 和 onSuccessItem 回调，您可以像下面这样利用它们：

this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);

Then（可选）- 回调：

    onSuccessItem(item: FileItem, response: string, status: number, headers:ParsedResponseHeaders): any {
            //this gets triggered only once when first file is uploaded       
     }
    onErrorItem(item: FileItem, response: string, status: number, headers: 
           ParsedResponseHeaders): any {
                let error = JSON.parse(response); //error server response            
            }

在 API 方面，您可以像下面这样重组 - 将其更改为您自己的签名。

 public async Task<IActionResult> UploadImages(MyFile upload)

那么 MyFile 模型可以是这样的：

public class MyFile
    {
        public string issueId { get; set; }        
        public IFormFile File { get; set; }
    }

获取参数和文件：

var file = upload.File //This is the IFormFile file
var param = upload.issueId //param

要将文件保存到磁盘：

using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.File.CopyToAsync(stream);
        }

多个表单数据文件上传参数

Multiple form-data file upload parameters

c#

angular

typescript

asp.net-core

ng2-file-upload