AngularJS上传文件

本文将介绍如何使用AngularJS来上传文件。

HTML

我们需要在HTML中添加一个文件选择器，以便用户选择需要上传的文件：

<input type="file" id="file" ng-model="file"/>

AngularJS

我们需要在AngularJS中处理上传文件的过程。在controller中，我们需要定义一个变量来存储文件数据：

$scope.file = null;

然后，我们需要定义一个函数来上传文件：

$scope.uploadFile = function () {
    var file = $scope.file;
    var formData = new FormData();
    formData.append('file', file);

    $http.post('/uploadFile', formData, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).then(function (response) {
        console.log(response.data);
    });
};

在上面的代码中，我们使用$http.post()方法来发送HTTP POST请求。其中，第二个参数是表单数据，第三个参数是配置信息。配置信息中，我们需要设置headers为{'Content-Type': undefined}，这样浏览器会自动设置合适的Content-Type头部。同时，我们还需要将transformRequest属性设置为angular.identity，这样请求体将以原样发送。

Node.js

在后端，我们使用Node.js来处理文件上传请求。下面是一段处理上传请求的代码：

var multer = require('multer');
var upload = multer({ dest: './uploads/' });

app.post('/uploadFile', upload.single('file'), function(req, res) {
    res.send('Upload file successful');
});

在上面的代码中，我们使用multer模块来中间件处理上传请求。其中，upload.single('file')表示只处理单个文件上传请求，上传的文件名为'file'。上传成功后，我们简单地返回了一个文本字符串。

结论

AngularJS可以很方便地处理文件上传请求。在HTML中添加一个文件选择器，然后在AngularJS中定义上传文件的函数即可。在后端，我们可以使用Node.js来处理文件上传请求。