0

Tenho um botão onde seleciono um arquivo, gostaria de fazer upload desse arquivo em meu servidor(Java + Vraptor). Já consigo pegar o arquivo e também salvar o nome do arquivo no banco junto com os dados do colaborador. Agora só falta enviar esse arquivo para o servidor. Estou usando esse modelo.

Faço o upload dessa forma:

    $scope.uploadFiles = function(file) {
        $scope.f = file;

    }

    var salvarImagem = function(file) {
        if (file && !file.$error) {
            file.upload = Upload.upload({
                //Não sei o que colocar aqui!
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {
                    file: file
                }
            });

            file.upload.then(function(response) {
                $timeout(function() {
                    file.result = response.data;
                    console.log("REsposta: " + response.data);
                });
            }, function(response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            });

            file.upload.progress(function(evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                    evt.loaded / evt.total));
            });
        }
    }

Depois chamo a função salvarImagem dentro da minha função que salva o Colaborador:

$scope.adicionarColaborador = function(colaborador) {
        if (!editar) {
            colaborador.arquivo = $scope.f.name;
            console.log('colaborador: ' + colaborador.arquivo)
            colaboradorAPI.saveColaborador(colaborador).success(function(data) {
            salvarImagem($scope.f);

         .../Código omitido

Qual o próximo passo agora? Como receber essa imagem em meu servidor e salva-la em um diretório, ou então como salvar essa imagem pra um diretório direto?

1

1 Resposta 1

2

Estou começando a trabalhar com Angular agora e acabo de me deparar a necessidade de fazer upload direto para um servidor. Também utilizei esse ng-file-upload. Fiz da mesma maneira do exemplo, mudando apenas a url: 'https://angular-file-upload-cors-srv.appspot.com/upload' para o caminho do meu servidor. Para testes, subi um servidor python para receber esse arquivo. Caso te ajude, seguem os trechos dos códigos:

JavaScript:

mainCtrl.controller('uploadCtrl', function ($scope, Upload, $timeout) {
$scope.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: 'http://192.168.1.112:5000/uploadImg',
            data: {file: file}
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
                console.log("REsposta: " + response.data);
            });
        }, function (response) {
            if (response.status > 0)
                $scope.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            file.progress = Math.min(100, parseInt(100.0 * 
                                     evt.loaded / evt.total));
        });
    }   
}
});

HTML:

<div ng-controller="uploadCtrl">
        <label>Selecione a imagem</label>
        <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">Adicionar</button>
        <br><br>
        Arquivo:
        <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
            <span class="progress" ng-show="f.progress >= 0">
                <div style="width:{{f.progress}}%" ng-bind="f.progress + '%'"/>
            </span>
        </div>  
    </div>

Python:

app = flask.Flask(__name__)

@app.route('/uploadImg', methods=['POST', 'GET', 'OPTIONS'])
@crossdomain(origin="*")
def uploadImg():
    file = flask.request.files['file']
    filename = file.filename
    file.save('/tmp/'+ filename)
    return json.dumps('foo')

if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .