Question

我已经知道如何使用angularjs和java在mongodb中保存图像以将其保存在我的mongodb中，它工作正常。

现在，我需要从mongodb获取已保存的图像，并使用AngularJS将其显示在html页面中。

ps：我知道ngSrc。

我的HTML：

<form method="post" enctype="multipart/form-data" name="formCadastroFotos" id="formCadastroFotos" role="form" novalidate>

                        <div class="form-group">
                            <label for="foto">Upload da Foto</label>
                            <input type="file" name="foto" id="foto" onchange="angular.element(this).scope().uploadFile(this.files)">

                        </div>                          

                        <br>
                        <div class="alert alert-success" ng-show="show" role="alert"> 
                                <center> 
                                    <strong>OK!</strong> Foto cadastrada com sucesso. 
                                </center> 
                        </div> 
                        <div class="alert alert-danger" ng-show=showErro role="alert"> 
                                <center> 
                                    <strong>Erro!</strong> Foto não foi cadastrada com sucesso. 
                                </center> 
                        </div> 
                    </form>

我的js：

var myApp = angular.module('AntInformaticaApp', ['ngMessages']);
myApp.controller('CadastroFotosController', ['$scope', '$http', ' $window', function ($scope, $http, $window) {

console.log("Entrou no javascript para envio da foto.");
$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post('cadastroFotos', fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined }}).then(function(response) {
            $scope.showOk();
    }, function(response) { 
        console.log("erro");
        $scope.showNOk();
    });

};


$scope.logout = function(){
    window.location = '/logout';
}

$scope.showOk = function(){
    $scope.show=true;
}

$scope.showNOk = function(){
    $scope.showErro=true;
}

}]);

它正确地运行到我的java控制器：

@Controller
public class CadastroFotosController {


@RequestMapping(value="/cadastroFotos", method=RequestMethod.POST)
public @ResponseBody MsgRetornoDTO cadastroPecas(@RequestParam("file") MultipartFile file) throws IOException {

    MsgRetornoDTO retorno = new MsgRetornoDTO();
    retorno = UtilGeral.salvaFotoMongo(file);

    return retorno;

  }

}

public static MsgRetornoDTO salvaFotoMongo(MultipartFile file){

    MsgRetornoDTO retorno = new MsgRetornoDTO();

    if (!file.isEmpty()) {
        try {

            Mongo mongo = new Mongo("localhost", 27017);
            DB db = mongo.getDB("antinformatica");
            DBCollection collection = db.getCollection("dummyCol");

            String newFileName = file.getOriginalFilename();

            File imageFile = new File(file.getOriginalFilename());
            imageFile.createNewFile(); 
            FileOutputStream fos = new FileOutputStream(imageFile); 
            fos.write(file.getBytes());
            fos.close(); 

            // create a "photo" namespace
            GridFS gfsPhoto = new GridFS(db, "photo");

            // get image file from local drive
            GridFSInputFile gfsFile = gfsPhoto.createFile(imageFile);

            // set a new filename for identify purpose
            gfsFile.setFilename(newFileName);

            // save the image file into mongoDB
            gfsFile.save();

        } catch (UnknownHostException e) {
            e.printStackTrace();
        } catch (MongoException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    } else {
        System.out.println("empty file.");
    }   

    retorno.setCodReturn(0);
    retorno.setDescReturn("OK");
    return retorno;
}

感谢您的帮助，谢谢。

Answer 1

如果你得到它，你有答案请回复我或发布它我同样卡住了。我也通过Angular在mongodb中保存图像。我知道如何通过下载获取该图像，并且不知道如何在html页面中显示。如果你得到它，请发送电子邮件至id- symonkt@gmail.com

如何使用angularjs在mongodb中显示已保存的图像？

1 个答案: