在Angular中上传多个文件

11 浏览
0 Comments

在Angular中上传多个文件

我有一个情况，我有一个表单，其中有一行，有两个文本字段的输入，并且我必须为该行上传一个文件，这种行可以是“N”，然后有一个可以为整个表单输入的主文件，而这些是表单的一部分，我必须一次性提交所有这些文件，点击保存按钮。

我在使用ng-upload时遇到了问题，它需要一个API调用，而我真的不能为这个表单做多个API调用。

以下是示例HTML代码：

产品 制造商 位置 规格

0

3 答案

0 Comments

问题的原因是在上传多个文件时出现了错误。解决方法是在forEach函数之前先定义一个数组变量var values = [];。

0
0 Comments

在这个例子中，问题的出现是因为需要限制一次上传的文件数量，例如最多只能同时上传5个文件。

解决方法是在$scope.upload方法中加入限制条件$scope.file.length>5，并且不要忘记这段代码只是解释了如何绑定AngularJS和文件输入...请阅读有关文件上传的内容（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest），并将其替换为警告代码...希望这能帮到你..

所以，现在文件通过“values”数组在控制器中可用，对吗？作为values[i]。为什么在您的上传函数中使用“files”变量来访问它？

在php中输出类似于这样的内容：[additionals] => [object File]，[object File]

这个指令的对象支持浏览器基础的文件预览、名称大小验证等，在上传之前展示文件，您可以通过value._file访问原始文件。

0
0 Comments

问题出现的原因是在使用Angular进行多文件上传时，无法将文件数据正确地添加到FormData对象中。在尝试将文件数据添加到FormData之后，FormData仍然为空。

解决方法是将文件数据添加到FormData对象之前，将$http.post请求放在另一个方法中，并在该方法中返回FormData对象。这样可以确保FormData对象中包含文件数据。

以下是一个可能的解决方法：

function uploadFiles() {
  var fd = new FormData();
  // 将文件数据添加到FormData中
  angular.forEach($scope.files, function(file) {
    fd.append('files[]', file);
  });
  // 将其他表单数据添加到FormData中
  fd.append('name', $scope.name);
  fd.append('description', $scope.description);
  
  // 发送POST请求
  $http.post('/upload', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  })
  .then(function(response) {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(function(error) {
    // 处理错误信息
    console.log(error);
  });
}
function getFileData() {
  // 获取文件数据
  var fileData = document.getElementById('file').files[0];
  
  // 创建FormData对象
  var fd = new FormData();
  // 将文件数据添加到FormData中
  fd.append('file', fileData);
  
  return fd;
}

希望以上解决方法对您有所帮助。如果您有任何其他问题，请随时提问。

0