Question

我使用 multer 将多个图像上传到MongoDB 我的前端部分是使用angular Js开发的我可以将图像上传到MongoDB，但现在我想在HTML页面上预览图像，然后再将它们上传到数据库。

HTML代码：

<div class="col-md-4">
    <div class="input-group">
        <input type="file" name="file" id='file' multiple="multiple" required="required" />
    </div>
</div>

Angular Js Code ：

$scope.upload = function () {
            //var file = angular.element(document.querySelector('#file')).prop("files")[0];
                $scope.files = [];
                $scope.uploadedFiles = [];
                $scope.selectedFiles = [];
                console.log('file length :' + angular.element(document.querySelector('#file')).prop("files").length);
                for(var i = 0 ; i < angular.element(document.querySelector('#file')).prop("files").length ; i++){
                  var file = angular.element(document.querySelector('#file')).prop("files")[i];
                  console.log('file Name :' + file);
                  $scope.files.push(file);  
                }
                console.log('Uploaded file :' + $scope.files);
               // $scope.files.push(file);
                $http({
                    method: 'POST',
                    url: '/image/upload',
                    headers: { 'Content-Type': undefined },
                    transformRequest: function (data) {
                        var formData = new FormData();
                        formData.append('model', angular.toJson(data.model));
                        for(var  i = 0 ; i < data.files.length ; i++){
                            formData.append('file', data.files[i]);
                            $scope.uploadedFiles.push(data.files[i]);
                        }
                        console.log('Sending File size :' + data.files.length);
                        //formData.append('file', data.files[0]);
                        return formData;
                    },
                    data: { model: { title: 'hello'}, files: $scope.files }

                }).then(function (res) {

                    console.log(res);
                });
        }

我尝试了什么

 .then(function (res) {
                         $scope.selectedFiles = "/public/images/" + res.data.imagePaths[0];
}

<div>
 Images :{{selectedFiles}}<img ng-src="{{selectedFiles}}">
</div>

我将所选文件传递给html页面，但它没有显示图像。
我该怎么办，请帮忙。

Answer 1

请检查此弹药http://plnkr.co/edit/y5n16v?p=preview，基本提示如下所示

fileReader.readAsDataUrl($scope.file, $scope)
                      .then(function(result) {
                          $scope.imageSrc = result;
                      });

如何在使用AngularJS发布到数据库之前预览图像？

1 个答案: