使用 dataForm 为 null 的对象将 DataForm 发送到服务器

Question

我尝试使用对象将 dataForm 发送到服务器。该对象包含其他内容：

public class versionModel
{
    public string productName { get; set; }
    public string versionNumber { get; set; }
    public string[] features { get; set; }
    public HttpPostedFileBase file { get; set; }
}

我从 angular 2 服务发送，这是创建上传并保存它的组件：

upload() 
{
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    if (fileCount > 0) { 
        for (let i = 0; i < fileCount; i++) {
            formData.append('file[]', inputEl.files.item(i));
        }
        this.service.upload(formData).subscribe(x => this.me = x);
        this.formData2.emit(formData.getAll('file[]'));

    }
}

这是客户端的模型：

export class AddVersion 
{
    constructor(public productName: string, public versionNumber: string, public features: string[], public file: FormData) {
        this.productName = productName;
        this.versionNumber = versionNumber;
        this.features = features;
       this.file = file;
    }
}

这是服务器端：

[HttpPost]
public ActionResult AddVersion(versionModel version)
{
    ServiceReference1.ProductsServiceClient psc = new ServiceReference1.ProductsServiceClient();

   var res= psc.AddVersion(new ServiceReference1.AddVersionModel()
    {
        productName = version.productName,
        versionNumber = version.versionNumber,
        features = version.features,
        file =version.file.InputStream
   });
    return Json(res, JsonRequestBehavior.AllowGet);
}

但是在服务器中我得到了除文件之外的所有信息，我得到的是空值。

Answer 1

我没有准确地尝试过您在做什么，但是在尝试通过 MVC 表单执行文件上传时我确实遇到了类似的结果。该文件始终为空。

事实证明，问题在于表单必须声明它是 Multi-Part 上传

例如：

<form id="Form1" method="post" encType="multipart/form-data" runat="server">

我需要 encType。

我认为在您的 angular class 中，您应该添加 encType header.

headers.append('Content-Type', 'multipart/form-data');

我找到了以下解决方案：在这个页面 File Upload In Angular?

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** No need to include Content-Type in Angular 4 */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

唉，我不是 angular 开发人员，但我有理由相信是 multi-part header 你缺少的导致了这个问题。

使用 dataForm 为 null 的对象将 DataForm 发送到服务器

Send DataForm to server with an object the dataForm is null

c#

dataform

httppostedfilebase

angular