我不敢相信这是如此困难。如果使用 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");
});
通过这样做，我加载的任何图片都会被复制到上传文件夹中。现在，出于不同的原因，我想使用 Angular 。事实证明，我需要一个指令。为什么，我不明白(但那是 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 响应:错误:多部分:未找到边界。 现在，我不想再使用任何外部模块。我可以，但事实是我必须编写大量代码并发送许多文件和一些数据，所以我想在选择外部模块(或编写它)之前完全了解发生了什么。
如何解决“未找到边界”错误及其含义？
最佳答案
关于什么是“边界”，维基百科对此有相当多的解释: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--
关于javascript - 使用 Angular 将文件复制到服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30080966/