使用TypeScript将文件上传到控制器

11 浏览
0 Comments

使用TypeScript将文件上传到控制器

我正在使用ASP.NET MVC 5作为后端，使用Angular + Typescript作为前端开发一个Web应用程序。

我想要将文件上传到服务器，但是由于某种原因，控制器没有将文件作为参数接收（控制器中的参数为null）。

以下是代码：

HTML：


上传

Typescript：

// 控制器类：
uploadFile(): void {
    var filePathInput: any = $("#filePath");
    if (filePathInput[0].files) {
        var file: any = filePathInput[0].files[0];
        var resource: any = this.service.uploadFile();
        resource.save(file, (result: any) => {
            if (!result || !result.success) {
                alert("错误");
            } else {
                alert("成功");
            }
        });
    }
}
// 服务类：
uploadFile(): ng.resource.IResourceClass {
    return this.$resource("/MyController/UploadImage", null, { method: "POST" });
}

后端控制器：

[HttpPost]
public JsonResult UploadImage([FromBody]HttpPostedFileBase file)
{
    if (file == null || file.ContentLength == 0)
    {
        return NullParameterResponse();
    }
    else
    {
        file.SaveAs("/img/" + Path.GetFileName(file.FileName));
        return SuccessResponse();
    }
}

0

1 答案

0 Comments

上传文件到控制器使用typescript的问题是，发送的请求以FormData形式而不是JSon对象形式。解决方法是定义一个transformRequest函数，将数据转换为FormData对象，并在angular资源中定义保存选项，并传递之前创建的transformRequest函数。然后在控制器中调用资源的保存方法，传递文件。最后，控制器必须接收与angular控制器中定义的相同名称的IList参数。

原因：

发送请求时，希望以FormData形式而不是JSon对象形式发送请求。

解决方法：

1. 创建一个transformRequest函数，将数据转换为FormData对象。

2. 在angular资源中定义保存选项，并传递之前创建的transformRequest函数。

3. 在控制器中调用资源的保存方法，并传递文件。

4. 控制器必须接收与angular控制器中定义的相同名称的IList参数。

0