使用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，我不能上传文件。

来源

2014-08-29 thinkmind

@davidism您好，我修复缩进和结果给了我错误的请求浏览器（或代理）发送了一个请求，表明此服务器无法理解。 – thinkmind 2014-08-29 03:28:48

什么是“CutOffListTemp.id”？具体而言，它是关键字还是特定于此应用程序？ – 2015-03-10 22:47:13

@thinkmind：我收到了错误的请求，浏览器发送了一个请求，表示这台服务器无法理解。你是如何解决这个问题的？ – ngunha02 2017-03-16 02:20:20

您好我终于可以上传文件，我改变角部位，我这个改变：

$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) { 
        }); 
      // } 
     };

来源

2014-08-30 06:40:33 thinkmind

第一件事是关于发布请求。如果没有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）：

来源

2014-08-29 08:38:53

我试过这个，但仍然出现错误。在分析它时，文件本身在请求服务器时没有保存。 AngularJs或HTMLL上的错误？谢谢。 – thinkmind 2014-08-30 01:08:19

谢谢@辛增！ :) – thinkmind 2014-08-30 06:41:08

使用AngularJS上传文件失败

回答

相关问题