копирование файла на сервер с использованием углового

Не могу поверить, что это так сложно. При использовании nodejs и стандартный HTML, я могу передать файл, выполнив:копирование файла на сервер с использованием углового

index.html:

<form id  = "uploadForm" 
    enctype = "multipart/form-data" 
    action = "/api/photo" 
    method = "post" 
> 
<input type="file" name="userPhoto" /> 
<input type="text" placeholder="keywords" name="keywords" /> 
<input type="submit" value="Upload Image" name="submit"> 
</form>

и на server.js

var express=require("express"); 
var multer = require('multer'); 
var app=express(); 
var done=false; 


app.use(express.static(__dirname + '/')); 

/*Configure the multer.*/ 
app.use(multer({ dest: './uploads/', 
rename: function (fieldname, filename) { 
    return filename+Date.now(); 
    }, 
onFileUploadStart: function (file) { 
    console.log(file.originalname + ' is starting ...') 
}, 
onFileUploadComplete: function (file) { 
    console.log(file.fieldname + ' uploaded to ' + file.path) 
    done=true; 
} 
})); 


/*Handling routes.*/ 
app.get('/',function(req,res){ 
     res.sendfile("index.html"); 
}); 

app.post('/api/photo',function(req,res){ 
    if(done==true){ 
    res.end("File uploaded."); 
    } 
}); 

/*Run the server.*/ 
app.listen(3000,function(){ 
    console.log("Working on port 3000"); 
});

Делая это, любая картина, которую я загрузка копируется в папку uploads. Теперь я хочу использовать угловые по разным причинам. Как оказалось, мне нужна директива. Почему, я не понимаю (но это another question). Поскольку я использую multer, мне нужны данные типа «multipart/form-data». Это мой index.html:

</<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script> 
</head> 

<body ng-app="formExample"> 
<div ng-controller="ExampleController"> 

    <form ng-submit="examplePost()" role="form" > 
     <input type="file" bind-file="" ng-model="file" /> 
     <input type="text" ng-model="keywords" placeholder="keywords"/> 
     <input type="submit" ng-onclick="submit" value="Upload Image" > 
    </form> 

</div> 

<script> 
    angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', '$http', function($scope,$http) { 
     $scope.master = {}; 

     $scope.examplePost = function() { 

     $http({ 
      method: 'POST', 
      url: '/upload-file', 
      headers: { 
       'Content-Type': 'multipart/form-data' 
      }, 
      data: { 
       upload: $scope.file 
      }, 
      transformRequest: function (data, headersGetter) { 
       var formData = new FormData(); 
       angular.forEach(data, function (value, key) { 
        formData.append(key, value); 
       }); 

       return formData; 
      } 
     }) 
     .success(function (data) { 

     }) 
     .error(function (data, status) { 

     }); 

     }; 


    }]) 
    .directive('bindFile', [function() { 
     return { 
      require: "ngModel", 
      restrict: 'A', 
      link: function ($scope, el, attrs, ngModel) { 
       el.bind('change', function (event) { 
        ngModel.$setViewValue(event.target.files[0]); 
        $scope.$apply(); 
       }); 

       $scope.$watch(function() { 
        return ngModel.$viewValue; 
       }, function (value) { 
        if (!value) { 
         el.val(""); 
        } 
       }); 
      } 
     }; 
    }]); 
</script> 

</body> 
</html>

и я получаю красивый ответ 500: Ошибка: Multipart: Граница не найдено. Теперь я не хочу использовать внешние модули. Я мог бы, но на самом деле я должен написать много кода и отправить много файлов плюс некоторые данные, поэтому я хочу полностью понять, что происходит, прежде чем выбирать внешний модуль (или записывать его).

Как решить ошибку «Граница не найдена» и что это значит?

источник

2015-05-06 cauchy

О том, что «граница», википедия в значительной степени объясняет: http://en.wikipedia.org/wiki/MIME#Multipart_messages

A MIME multipart message contains a boundary in the "Content-Type: " header; this boundary, which must not occur in any of the parts, is placed between the parts, and at the beginning and end of the body of the message, as follows:
MIME-Version: 1.0 
Content-Type: multipart/mixed; boundary=frontier 

This is a message with multiple parts in MIME format. 
--frontier 
Content-Type: text/plain 

This is the body of the message. 
--frontier 
Content-Type: application/octet-stream 
Content-Transfer-Encoding: base64 

PGh0bWw+CiAgPGhlYWQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyB0aGUg 
Ym9keSBvZiB0aGUgbWVzc2FnZS48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+Cg== 
--frontier-- 

источник

2015-05-06 15:30:14

Чтобы построить на этот ответ: учитывая то, что в коде OP, тем 'заголовок Content-type' удаляется, вполне вероятно, что объявленная граница также удалена (и граница не объявляется в объекте 'headers'). OP должен посмотреть HTTP-заголовки, отправленные для просмотра того, что происходит. (Должно быть легко с devtools) –

Я вынул удаление декларации Content-Type. Та же проблема. – cauchy

@cauchy: Затем просмотрите заголовки HTTP (например, откройте вкладку «Сеть» в инструментах разработчика Chrome, затем повторите процесс - появится HTTP-запрос и ответ, и вы сможете увидеть, как выглядят значения отправленных заголовков) –

копирование файла на сервер с использованием углового

ответ

Смежные вопросы