AngularJS：如何实现一个简单的带有多部分表单的文件上传？

18 浏览
0 Comments

AngularJS：如何实现一个简单的带有多部分表单的文件上传？

我想从AngularJS向node.js服务器进行简单的多部分表单提交，表单应该包含一个JSON对象和另一个部分中的一张图片，（我目前只是通过$resource提交JSON对象）。

我想开始使用input type =“file”，但后来发现AngularJS无法绑定到它……

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

我是AngularJS的新手，写自己的指令一点都不舒服。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

你可以使用简单、轻量级的ng-file-upload指令。

它支持拖放、文件进度和针对不支持HTML5的浏览器使用FileAPI闪存shim进行文件上传。

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);
var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
  Upload.upload({
    url: 'my/upload/url',
    file: $files,            
  }).progress(function(e) {
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 
}];

0
0 Comments

这是一个使用angularjs（已测试v.1.0.6）的实际工作解决方案，没有其他依赖。

html

Angularjs（1.0.6）不支持在“input-file”标签上使用ng-model，因此您必须以“原生方式”完成，从用户选择的所有（最终选择的）文件传递。

controller

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

0