一尘不染

AngularJS:如何实现具有多部分形式的简单文件上传?

angularjs

我想从AngularJS到node.js服务器做一个简单的多部分表单发布,表单的一部分应包含JSON对象,另一部分应包含图像(我目前仅使用$
resource发布JSON对象)

我以为我应该从输入type =“ file”开始,但是后来发现AngularJS无法绑定到该文件。

我可以找到的所有示例都是用于包装jQuery插件以进行拖放的。我想要一个文件的简单上传。

我是AngularJS的新手,对自己编写指令完全不满意。


阅读 192

收藏
2020-07-04

共1个答案

一尘不染

一个真正有效的解决方案,除了angularjs之外没有其他依赖性(已通过v.1.0.6测试)

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs(1.0.6)在“ input-file”标签上不支持 ng-model
,因此您必须以“本机”方式进行操作,该方式会传递用户的所有(最终)选定文件。

控制者

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

最酷的部分是 未定义的 内容类型和 transformRequest:angular.identity ,它们使$
http能够选择正确的“内容类型”并管理处理多部分数据时所需的边界。

2020-07-04