使用AngularJS上传文件失败
问题描述：
下面是关于文件上传的代码片段。使用AngularJS上传文件失败
这里是我的HTML代码，我会选择和上传的文件：
<form ng-click="addImportFile()" enctype="multipart/form-data">
<label for="importfile">Import Time Events File:</label><br><br>
<label for="select_import_file">SELECT FILE:</label><br>
<input id="import_file" type="file" class="file btn btn-default" ng-disabled="CutOffListTemp.id== Null" data-show-preview="false">
<input class="btn btn-primary" type="submit" name="submit" value="Upload" ng-disabled="CutOffListTemp.id== Null"/><br/><br/>
</form>
这是我的控制器将链接HTML和我的Python文件：
angular.module('hrisWebappApp').controller('ImportPayrollCtrl', function ($scope, $state, $stateParams, $http, ngTableParams, $modal, $filter) {
$scope.addImportFile = function() {
$http.post('http://127.0.0.1:5000/api/v1.0/upload_file/' + $scope.CutOffListTemp.id, {})
.success(function(data, status, headers, config) {
console.log(data);
if (data.success) {
console.log('import success!');
} else {
console.log('importing of file failed');
}
})
.error(function(data, status, headers, config) {});
};
这是我的Python文件：
@api.route('/upload_file/<int:id>', methods=['GET','POST'])
@cross_origin(headers=['Content-Type'])
def upload_file(id):
print "hello"
try:
os.stat('UPLOAD_FOLDER')
except:
os.mkdir('UPLOAD_FOLDER')
file = request.files['file']
print 'filename: ' + file.filename
if file and allowed_file(file.filename):
print 'allowing file'
filename = secure_filename(file.filename)
path=(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))
file.save(path) #The end of the line which save the file you uploaded.
return redirect(url_for('uploaded_file',
filename=filename))
return '''
<!doctype html>
<title>Upload new File</title>
<h1>Upload new File</h1>
<p>opsss it seems you uploaded an invalid filename please use .csv only</p>
<form action="" method=post enctype=multipart/form-data>
<p><input type=file name=file>
<input type=submit value=Upload>
</form>
'''
而在控制台的结果给了我这个，即使我选择正确的格式的文件：
<!doctype html>
<title>Upload new File</title>
<h1>Upload new File</h1>
<p>opsss it seems you uploaded an invalid filename please use .csv only</p>
<form action="" method=post enctype=multipart/form-data>
<p><input type=file name=file>
<input type=submit value=Upload>
</form>
这不是回到我的HTML，我不能上传文件。
答
您好我终于可以上传文件，我改变角部位，我这个改变：
$scope.addImportFile = function() {
var f = document.getElementById('file').files[0]; console.log(f);
var formData = new FormData();
formData.append('file', f);
$http({method: 'POST', url: 'http://127.0.0.1:5000/api/v1.0/upload_file/' +$scope.CutOffListTemp.id,
data: formData,
headers: {'Content-Type': undefined},
transformRequest: angular.identity})
.success(function(data, status, headers, config) {console.log(data);
if (data.success) {
console.log('import success!');
}
})
.error(function(data, status, headers, config) {
});
// }
};
答
第一件事是关于发布请求。如果没有ng-click =“addImportFile（）”，浏览器通常会负责序列化表单数据并将其发送到服务器。所以，如果你尝试：
<form method="put" enctype="multipart/form-data" action="http://127.0.0.1:5000/api/v1.0/upload_file">
<label for="importfile">Import Time Events File:</label><br><br>
<label for="select_import_file">SELECT FILE:</label><br>
<input id="import_file" type="file" name="file" class="file btn btn-default" ng-disabled="CutOffListTemp.id== Null" data-show-preview="false">
<input class="btn btn-primary" type="submit" name="submit" value="Upload" ng-disabled="CutOffListTemp.id== Null"/><br/><br/>
</form>
，然后在蟒蛇，让你的请求URL独立scope.CutOffListTemp.id的： @ api.route（ '/ upload_file'，方法= [ 'GET'， 'POST' ]）
它可能会工作。
或者，如果您想使用自定义函数发送发布请求，浏览器将不再处理序列化内容，您需要自行完成。
在角度上，$ http.post的API是： $ http.post（'/ someUrl'，data）.success（successCallback）; 如果我们对数据参数使用“{}”，表示为空，服务器将不会找到名为“file”（file = request.files ['file']）的数据。因此，你会看到错误的请求
为了解决这个问题，我们需要使用FORMDATA使这需要你的浏览器文件上传支持HTML5：
$scope.addImportFile = function() {
var f = document.getElementById('file').files[0]
var fd = new FormData();
fd.append("file", f);
$http.post('http://127.0.0.1:5000/api/v1.0/upload_file/'+$scope.CutOffListTemp.id,
fd,
headers: {'Content-Type': undefined})
.success......
除了使用原生以上的JavaScript代码中，有很多伟大的角上传文件库，它可以使文件上传的角度更容易，你可能会想看看他们中的一个（参考：File Upload using AngularJS）：
@davidism您好，我修复缩进和结果给了我错误的请求 浏览器（或代理）发送了一个请求，表明此服务器无法理解。 – thinkmind 2014-08-29 03:28:48
什么是“CutOffListTemp.id”？具体而言，它是关键字还是特定于此应用程序？ – 2015-03-10 22:47:13
@thinkmind：我收到了错误的请求，浏览器发送了一个请求，表示这台服务器无法理解。你是如何解决这个问题的？ – ngunha02 2017-03-16 02:20:20