多个表单数据文件上传参数 [英] Multiple form-data file upload parameters

问题描述

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

I'd like to use the ng2-file-upload component on the client side and everything works so far but now I have to pass an additional parameter with every file that contains an identifier the file is attached to. I try to set the additionalParameter property of the FileUploader object in TypeScript:

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

在服务器上，我有以下可用的方法，但没有得到上面设置的其他参数(issueId).(.NET Core 2.0)

On the server I have the following method that is working except I don't get the additional parameter (issueId) set above. (.NET Core 2.0)

public RequestResultModel File(IFormFile file);

请求有效负载包含参数，但格式为新数据:

The request payload contains the parameter but in a new form-data:

------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文件，字符串projectid)，它可以工作，但是现在我想使用此客户端组件，因为我不想拖拽，而且我很懒.我尝试在初始化后更改组件的POST URL( this.uploader.options.url ="/api/Issue/File/" + result.data.id; )，但是它尝试POST到原始地址.

How can I modify the controller method in order to read the issueId parameter as well? In a previous project I used a second parameter public async Task<ApiResultBase> Upload(IFormFile file, string projectid) and it worked but now I would like to use this client side component because I don't want to suck with drag and drop and I'm lazy. I have tried to change the component's POST url after initialize (this.uploader.options.url = "/api/Issue/File/"+result.data.id;) but it tries to POST to the original address.

推荐答案

您已步入正轨.我可以尝试的方法略有不同.在客户端上，请尝试以下操作:

You are on track. I have a slightly different approach you can try out.On the client, try something like:

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 回调，如下所示:

The library also has onErrorItem and onSuccessItem callbacks that you can leverage like below:

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

然后(可选)-回调:

    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方面，您可以按如下所示进行重组-将其更改为您自己的签名.

On the API side you can restructure like below - Change it to your own signature.

 public async Task<IActionResult> UploadImages(MyFile upload)

然后， MyFile 模型可以类似于:

Then the MyFile model can be something like:

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

这篇关于多个表单数据文件上传参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！