尝试使用 ng-file-upload 和多方上传文件来上传文件答案

【问题标题】：Trying to upload file by using ng-file-upload and multiparty to upload files尝试使用 ng-file-upload 和多方上传文件来上传文件
【发布时间】：2016-04-07 05:10:32
【问题描述】：

我正在尝试使用 ng-file-upload 和多方上传文件，但我不断收到 files.file undefined 错误，我不确定这个问题是由 ng- 引起的文件上传或多方，我花了将近 20 个小时在这个.....

这是我的代码 users.client.view.html

<div class="modal-footer">
   <div class="btn-group">
       <label title="Upload" for="fileInput" class="btn btn-primary">
       <input type="file" accept="image/*" id="fileInput" class="hide">
       Upload new image
       </label>
   </div>
   <button  ng-click="uploadAvatar(croppedAvatarImage)" type="button" class="btn btn-primary">Save changes</button>
</div>

users.client.controller.js

$scope.uploadAvatar = function(image) {
    $scope.uploadInProgress = true;

    $scope.uploadProgress = 0;
        if (angular.isArray(image)) {
            image = image[0];
        }
        Upload.upload({
            url: '/api/v1/user/me/avatar',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            method: 'POST',
            data: {
                file: image
            }
        }).success(function(data, status, headers, config) {
            console.log("upload success!");
            $scope.$apply();
        }).error(function(err) {
            $scope.uploadInProgress = false;
            console.log("upload failed!");
    });
};

users.profile.server.controller.js

exports.uploadAvatar = function(req, res) {
    var form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {

        Object.keys(files).forEach(function(name) {
            console.log('got file named ' + name);
        });

        console.log(files, files.file);

        var file = files.file[0]; // HERE THE PROGRAM CRASHED BY THE ERROR "Cannot read property '0' of undefined"
        var contentType = file.headers['content-type'];
        var extension = file.path.substring(file.path.lastIndexOf('.'));
        var destPath = '/' + user.id + '/profile' + '/' + uuid.v4() + extension;

        var headers = {
            'x-amz-acl': 'public-read',
            'Content-Length': file.size,
            'Content-Type': contentType
        };
        var uploader = s3Client.upload(file.path, destPath, headers);

        uploader.on('error', function(err) {
            res.status(500).send(err);
            //TODO handle this
        });

        uploader.on('end', function(url) {
            //TODO do something with the url
            console.log('file opened:', url);
        });
    });
};

【问题讨论】：

标签： javascript angularjs node.js file-upload mean-stack

【解决方案1】：

files 是一个对象，其中属性名称是字段名称，值是文件对象的数组。因此，您尝试将名称添加到字段并使用它来获取文件数组。

在users.client.view.html中，添加name属性：

<input type="file" accept="image/*" id="fileInput" name="fileInput" class="hide">

在 users.profile.server.controller.js 中：

更改以下代码

var file = files.file[0];

到

var file = files.fileInput[0];

【讨论】：

感谢您的建议！但问题是，我试过console.log(files)，输出是{}，这意味着没有上传到后端，但我真的不知道哪一部分是重点
我只能定义字段，但是 req.files 总是空的

【解决方案2】：

好吧，我终于想通了，我实际上是在尝试将 Base64 作为文件上传，因为我得到的 img 来自 ngCrop，它是一个 Base64 字符串，所以在 file 字段。

【讨论】：