AngularJS：如何实现一个简单的文件上传与multipart形式？

发布时间：2020-12-17 09:14:16 所属栏目：安全来源：网络整理

导读：我想做一个简单的多部分表单post从AngularJS到一个node.js服务器，表单应该包含一个部分中的JSON对象和另一部分中的图像， (我目前只发布JSON对象与$ resource) 我想我应该开始输入type =“文件”，但后来发现，AngularJS不能绑定到.. 所有的例子我可以找到

我想做一个简单的多部分表单post从AngularJS到一个node.js服务器，
表单应该包含一个部分中的JSON对象和另一部分中的图像，
(我目前只发布JSON对象与$ resource)

我想我应该开始输入type =“文件”，但后来发现，AngularJS不能绑定到..

所有的例子我可以找到的是包装jQuery插件拖&下降。我想要一个简单的上传一个文件。

我是新来的AngularJS，并不舒服，写的我自己的指令。

一个真正的工作解决方案没有其他依赖关系，而不是angularjs(用v.1.0.6测试)

html

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

Angularjs(1.0.6)不支持ng-model对“input-file”标签，所以你必须以“本地方式”，从用户传递所有(最终)选定的文件。

控制器

$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赋予选择正确的“内容类型”和管理处理多部分数据时所需的边界的能力。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!