【问题标题】:Multiple form-data file upload parameters多个表单数据文件上传参数
【发布时间】:2018-02-12 16:25:55
【问题描述】:

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

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

在服务器上,我有以下方法有效,但我没有获得上面设置的附加参数 (issueId)。 (.NET Core 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 到原始地址。

【问题讨论】:

    标签: c# angular typescript asp.net-core ng2-file-upload


    【解决方案1】:

    你走上了正轨。我有一个稍微不同的方法,你可以试试。在客户端上,试试类似的方法:

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

    该库还具有 onErrorItemonSuccessItem 回调,您可以使用如下所示:

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

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

    【讨论】:

    • 成功了,谢谢!关键是具有两个属性的类。 (与 POST 一样,我不知道为什么我以前没有尝试过。)
    • 嘿@Perrier - 你是如何传递 IFormFile 的?还是图书馆自己管理?我看到issId是在additionalParameter中传递的,但是文件呢?
    • @neel 我在客户端使用ng2-file-upload library。要上传的文件在 fileDrop.uploader 的 queue 属性中。
    • 好的,谢谢,如果我有例如 MyFile 模型和另一个模型 FileList 和那个模型下我有 IFormFile,你知道它会如何工作。这将与 ng2 文件上传器附加参数一起使用吗?
    猜你喜欢
    • 1970-01-01
    • 2013-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-21
    • 2017-09-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多