AngularJS如何上传多部分表单数据和文件?

14 浏览
0 Comments

AngularJS如何上传多部分表单数据和文件?

我是angular.js的初学者,但我对基础知识有很好的掌握。我想要做的是上传一个文件和一些表单数据作为多部分表单数据。我了解到这不是angular的一个功能,但是第三方库可以实现这个功能。我已经通过git克隆了angular-file-upload,但是我仍然无法发布一个简单的表单和文件。请问有人可以提供一个如何做到这一点的示例,包括HTML和JS代码吗?

0
0 Comments

问题的原因是,使用Content-Type: multipart/form-data的base64编码会增加额外的33%开销。如果服务器支持,直接发送文件会更高效。

解决方法是,可以直接从FileList中进行多个$http.post请求。在发送带有File对象的POST请求时,重要的是要设置'Content-Type': undefined。XHR的send方法会检测File对象,并自动设置内容类型。

另外,<input type=file>元素默认情况下不能与ng-model指令一起使用,需要使用自定义指令。以下是一个可与ng-model一起使用的“select-ng-files”指令的示例代码。

0
0 Comments

问题的出现原因是用户想要使用AngularJS上传一个包含文本字段和文件的表单数据,但缺乏相关知识和代码。

解决方法是使用angular-file-upload插件来实现文件上传功能。首先,需要在AngularJS应用中引入该插件。然后,在控制器中定义一个uploadFile函数,该函数将被用于处理文件上传操作。该函数使用$upload服务来构建一个上传请求,其中包括文件的url、方法、数据和文件本身。通过监控上传进度,可以更新进度条的显示。上传成功后,可以执行一些其他操作。

在HTML代码中,使用ng-file-select指令来监听文件选择事件,并调用onFileSelect函数来处理所选文件。在表单中添加文本字段和文件选择框,并使用ng-model指令将其与$scope中的变量进行绑定。使用progress-bar指令来显示上传进度条。最后,在提交按钮上绑定uploadFile函数,以便在点击按钮时触发文件上传操作。

需要注意的是,该解决方法中使用了angular-file-upload插件,而该插件的具体使用方法和$upload服务的来源并未在提供的代码中给出。因此,用户需要自行查找并引入该插件,并确保$upload服务可用。

该解决方法是基于用户提出的问题和其他用户的回答进行总结和整理的,旨在帮助用户理解如何使用AngularJS上传包含文本字段和文件的表单数据。

0
0 Comments

AngularJS如何上传multipart表单数据和文件?

首先,你不需要对结构进行任何特殊的更改。我是说:HTML的输入标签。


其次,创建自己的指令。

.directive("fileModel",function() {
	return {
		restrict: 'EA',
		scope: {
			setFileData: "&"
		},
		link: function(scope, ele, attrs) {
			ele.on('change', function() {
				scope.$apply(function() {
					var val = ele[0].files[0];
					scope.setFileData({ value: val });
				});
			});
		}
	}
})

在$httpProvider的模块中添加依赖项,如(Accept,Content-Type等)与multipart/form-data一起使用(建议以json格式接受响应)。

$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8';

然后在控制器中创建一个单独的函数来处理表单提交调用。在服务函数中,故意处理“responseType”参数,以便服务器不会抛出“byteerror”。

in controller:
  // 以适当的方式编写此代码,以便您的文件对象将在下面的服务调用中被捕获。
  fileUpload.uploadFileToUrl(file); 
in service:
  .service('fileUpload', ['$http', 'ajaxService',
    function($http, ajaxService) {
      this.uploadFileToUrl = function(data) {
        var data = {}; // 文件对象 
        var fd = new FormData();
        fd.append('file', data.file);
        $http.post("endpoint server path to whom sending file", fd, {
            withCredentials: false,
            headers: {
              'Content-Type': undefined
            },
            transformRequest: angular.identity,
            params: {
              fd
            },
            responseType: "arraybuffer"
          })
          .then(function(response) {
            var data = response.data;
            var status = response.status;
            console.log(data);
            if (status == 200 || status == 202) //在成功时执行任何操作
            else // 在else中处理错误(如果需要的话)
          })
          .catch(function(error) {
            console.log(error.status);
            // 处理其他调用
          });
      }
    }
  }])

最后,在应用程序的根函数中,添加以下代码:


希望这有所帮助!

0