gpt4 book ai didi

file-upload - 如何像传统方式一样使用 AngularJs 上传文件

转载 作者:行者123 更新时间:2023-12-04 15:12:23 25 4
gpt4 key购买 nike

我已经试了好几天了。假设我有如下表格:

    <form ng-submit="create()" class="form-horizontal" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label">name : </label>
<div class="controls">
<input type="text" class="input-xlarge" ng-model="message.title" />
</div>
</div>
<div class="control-group">
<label class="control-label">avatar : </label>
<div class="controls">
<input type="file" ng-model="message.avatar" name="message[avatar]" />
</div>
</div>
<div class="well">
<input class="btn btn-large btn-primary" type="submit" value="建立資料" />
</div>
</form>

我正在使用carrierwave gem来处理幕后的文件上传。我的 Controller 是这样的:
 $scope.create = function($scope.message){
var deferred = $q.defer();
$http({
method: 'POST',
url: '/resources/messages',
data: $.param({message: message}),
headers: {'Content-Type': 'multipart/form-data'}
}).
success(function(data, status, headers, config){
deferred.resolve(data);
}).
error(function(data, status, headers, config){
deferred.reject(status);
});
return deferred.promise;
};

但是它不起作用。我打算做的是创建一个表单并像旧方式一样上传所有内容,但是我发现的示例例如 ng-upload 或类似 this post , 或 jquery file upload ,它们不适合我的需要。是否有任何示例或示例代码用于此目的?谢谢你。

最佳答案

我认为“像旧方式一样”是不使用 Ajax,但我猜这不是你的意思。 :)

@shaunhusain 的 fiddle 是如何使用 FormData object 的一个很好的例子来处理文件上传。并使用 this site作为引用,您可以使用 transformRequest合并 FormData 对象。

保持您的基本 $http代码,修改它以添加转换对象:

$scope.create = function(message){
var deferred = $q.defer();
$http({
method: 'POST',
url: '/resources/messages',
data: message // your original form data,
transformRequest: formDataObject // this sends your data to the formDataObject provider that we are defining below.
headers: {'Content-Type': 'multipart/form-data'}
}).
success(function(data, status, headers, config){
deferred.resolve(data);
}).
error(function(data, status, headers, config){
deferred.reject(status);
});
return deferred.promise;
};

创建一个工厂,将操作表单数据合并到可发送的有效负载中。它将遍历您的表单数据(包括上传的文件)并返回一个对发送者友好的对象:
app.factory('formDataObject', function() {
return function(data) {
var fd = new FormData();
angular.forEach(data, function(value, key) {
fd.append(key, value);
});
return fd;
};
});

我还没有测试过这个,但它应该是开箱即用的。

关于file-upload - 如何像传统方式一样使用 AngularJs 上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17629126/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com