Html AngularJS文件上载到后端Express服务器
我正在尝试使用angularjs和AngularFile upload library()进行文件上传 这是我的密码Html AngularJS文件上载到后端Express服务器,html,angularjs,file-upload,express,angularjs-directive,Html,Angularjs,File Upload,Express,Angularjs Directive,我正在尝试使用angularjs和AngularFile upload library()进行文件上传 这是我的密码 // ===============================My HTML File=========================== <input type="file" ng-file-select="onFileSelect($files)"> // ===============================My Controller====
// ===============================My HTML File===========================
<input type="file" ng-file-select="onFileSelect($files)">
// ===============================My Controller==========================
var $scope.formObj = {
name: "Test"
};
var fileToUpload;
$scope.onFileSelect = function (file) {
fileToUpload = file[0];
};
// POSt request to /api/items
$scope.addItem = function() {
console.log($scope.formObj);
$scope.upload = $upload.upload({
url: '/api/items',
method: 'POST',
data: { myObj: $scope.formObj },
file: fileToUpload
}).success(function(data, status, headers, config) {
console.log("success");
});
};
// ================================My Backend=============================
// This is the function that will receive POST request to /api/items
exports.create = function(req, res) {
console.log(req.body); // req.body is just an empty object. ==> {}
// apparently, I found all the data to be in req._readableState.buffer[0]
// in the form of a buffer
var buffer = req._readableState.buffer[0];
// trying to console.log the buffer.toString, resulting in something similar to this
// { name: "Test", image: Object }
console.log(buffer.toString());
return res.send(200);
};
/================================================================我的HTML文件===========================
//=================================================我的控制器==========================
变量$scope.formObj={
名称:“测试”
};
var fileToUpload;
$scope.onFileSelect=函数(文件){
fileToUpload=文件[0];
};
//向/api/items发布请求
$scope.addItem=函数(){
console.log($scope.formObj);
$scope.upload=$upload.upload({
url:“/api/items”,
方法:“POST”,
数据:{myObj:$scope.formObj},
文件:fileToUpload
}).success(函数(数据、状态、标题、配置){
控制台日志(“成功”);
});
};
//=======================================================我的后端=============================
//这是将接收对/api/items的POST请求的函数
exports.create=函数(请求、恢复){
console.log(req.body);//req.body只是一个空对象。==>{}
//显然,我发现所有数据都在req.\u readableState.buffer[0]中
//以缓冲区的形式
var buffer=req.\u readableState.buffer[0];
//尝试console.log buffer.toString,结果与此类似
//{name:“Test”,image:Object}
log(buffer.toString());
返回res.send(200);
};
因此,我的后端接收到formObj及其所有属性和值,但是,实际的文件数据本身,无论是以缓冲区的形式,还是以base64的形式,或者其他任何形式,都不会被接收到
我想知道为什么。这是我第一次使用文件上传,所以我不理解这个概念
请给我指出正确的方向如果您使用的是最新版本的Express,您会注意到
app.use(express.multipart())代码>不再与express捆绑
因此,请执行以下配置更改。在express.js中
var multer = require('multer');
app.use(multer({ dest: './uploads/'}));
您会发现这样做之后,您将分别在req.body req.file中找到数据和文件
希望能有帮助