Articles

Manipulação de Uploads de arquivos no Laravel – CodeSource.io

quase todos os aplicativos têm a ver com upload de arquivo de algum tipo: uma foto de perfil, um documento para verificação KYC, um documento contendo CV, etc.

portanto, é importante entender como lidar com uploads de arquivos no Laravel.

neste tutorial, vamos construir um formulário de perfil de usuário simples, onde o usuário precisará preencher seus detalhes e esses detalhes incluirão o envio de uma foto de perfil.

no final deste tutorial, você deve ser capaz de lidar com uploads de arquivos, lidar com a validação de upload de arquivos e saber o que fazer quando o arquivo não for carregado com sucesso.

configurando

para começar, o Laravel precisa ser instalado em seu sistema. Se você já tiver o Laravel instalado, poderá pular esta etapa.

eu recomendaria que você instalasse o Laravel globalmente. Especialmente se você planeja usá-lo com frequência. Você pode fazer isso executando o seguinte comando em um terminal.

composer global require laravel/installer

uma vez concluído, podemos ir em frente para criar um novo Projeto Laravel para este tutorial.

laravel new profile-form

executar o comando acima criará um novo Projeto Laravel no diretório atual chamado profile-form.

servir o aplicativo executando o seguinte:

cd profile-formphp artisan serve

navegue até onde você encontrará seu aplicativo mostrando a página de destino padrão do Laravel.

escrevendo a migração do banco de dados

precisaremos criar uma tabela de usuários que armazenará os detalhes do Usuário.Laravel é enviado com uma migração para a tabela usuários que pode ser encontrada em database\migrations14_10_12_000000_create_users_table.php. Modifique esse arquivo para ficar assim:

aqui, modificamos a migração padrão do laravel para a tabela usuários para incluir uma foto de campo que armazenará o URL para a fotografia dos usuários.

modificar o.arquivo env para incluir os detalhes corretos do banco de dados. Em seguida, execute as migrações executando o seguinte comando:

php artisan migrate

atualize o modelo do Usuário para refletir a adição do campo da foto. Adicione foto ao $fillable para que ele possa ser preenchido automaticamente pelo laravel ao criar e atualizar um usuário.

// App\User.phpprotected $fillable = ;

uma vez feito isso, podemos continuar a construir o frontend do formulário de perfil.

construindo o Frontend

precisaremos criar um sistema de autenticação que permita ao usuário se registrar e fazer login no aplicativo.

crie um novo arquivo em resources / views chamado register.blade.php. Adicione o seguinte ao arquivo recém-criado.

estamos usando o bootstrap para estilizar, daí a necessidade de adicioná-lo à seção superior da página. Fizemos todos os campos necessários aqui para que o Usuário não possa enviar o formulário sem preencher todos os campos.

o campo que é particularmente importante para nós aqui é o campo de entrada do arquivo <input type="file" Update web.php para incluir a rota para a página de registro

// web.php...Route::get('/register', function () { return view('register');});

indo para mostrará a página de registro contendo os campos típicos de um formulário de registro.

formulário de upload de arquivo

precisamos especificar o tipo de arquivos que são suportados. Como queremos apenas arquivos de imagem, precisamos especificar no elemento de entrada que queremos apenas arquivos de imagem.

Modfiy o input:type="file" para aceitar apenas arquivos de imagem, adicionando o atributo accept com um valor de image/* a tag de entrada.

a seção de fotografia agora deve gostar:

enquanto o formulário parece definido para enviar imagens para o back-end, ainda não pode fazer isso. Precisamos dizer ao formulário que ele precisará enviar outro tipo de dados de formulário para o back-end, neste caso dados binários.

fazemos isso adicionando o atributo enctypeao elemento form e definindo seu valor como multipart/form-data.

a tag do formulário de abertura deve ser semelhante:

<form action="#" class="col-md-5" enctype="multipart/form-data">

em seguida, precisamos escrever o controlador para lidar com o upload.

escrever o controlador

nosso back-end deve ser capaz de lidar com a validação, armazenamento e redirecionamento/autenticação do Usuário.

Laravel vem com um RegisterController que pode ser encontrado em app\Http\Controllers\Auth\RegisterController.php.

validação

o método validator no controlador de registro é encarregado da responsabilidade de validar os campos. Então, vamos atualizá-lo para refletir o que realmente queremos.

modifique o método validador no RegisterController.php para validar todos os nossos campos.

o campo name deve ser um campo obrigatório e uma string, daí as regras de validação. Semelhante vale para E-mail e senha.

o campo de senha precisa ser confirmado. No frontend, adicionamos um campo para password_confirmation. É com isso que o campo Senha é comparado. Finalmente, o campo da foto.

este campo é obrigatório no momento do registro. É necessário porque em nossa migração de banco de dados, fizemos isso. Se tivéssemos configurado para ser anulável, não precisaríamos definir a validação como necessária.

Laravel também tem uma regra de validação útil, imagem, que é usada para validar arquivos de imagem (arquivos com qualquer uma das seguintes extensões: jpeg, png, bmp, gif ou svg).

alguma outra validação que você pode querer ser realizada em arquivos é

  • garantindo que o tamanho do arquivo não seja maior ou menor do que um valor específico. Esta regra pode ser adicionada como max:500 ou min:500 conforme necessário. Deve-se notar que o tamanho do arquivo Aqui está em kilobytes
  • verificando as dimensões da imagem. Isso pode ser feito adicionando o seguinte à matriz de regras 'dimensions:min_width=100,min_height=200'.

Armazenar

O próximo passo é armazenar a imagem. Criaremos uma nova função para lidar com essa funcionalidade.

existem vários lugares onde os arquivos podem ser armazenados em um aplicativo: eles podem ser armazenados em um bucket s3, google drive ou mesmo em seu servidor de aplicativos.

Laravel vem com suporte para armazenar arquivos nesses locais. Por simplicidade, estaremos armazenando o arquivo de imagem no aplicativo.

Laravel Request class, Illuminate\Http\Request fornece suporte para manipulação de arquivos fora da caixa. O arquivo carregado pode ser armazenado via $request→file(<inputName>)→store(<folderToBeStored>). Para o nosso caso, poderíamos usar:

$request->file('photo')->store('profile')

isso armazena o arquivo na pasta storage \app\profile. O arquivo é salvo com um nome Aleatório e o url para o arquivo é retornado.

se quisermos atribuir um nome personalizado à imagem enquanto ela está sendo armazenada, precisamos usar o método storeAs.

usando o método storeAs será semelhante a

$request→file(<inputName>)→storeAs(<folderToBeStored>, <customName.fileExtension>)

a extensão do arquivo é importante, e laravel fornece maneiras simples de obter a extensão do arquivo que foi carregado, através do método clientExtension.

pode ser obtido como mostrado abaixo

$request->file('photo')->extension()

usando este método, podemos salvar a imagem de um usuário com base no nome do Usuário.

$fileName = $request->get('name') . '.' . $request->file('photo')->extension(); $request->file('photo')->storeAs('profile', $fileName);

no nosso caso, podemos nos contentar com os nomes aleatórios que o laravel salva nosso arquivo.

  • para que seu arquivo seja acessado publicamente, ele precisa ser armazenado na pasta storage/app/public.
  • Arquivos em outras pastas não serão publicamente disponível

Vamos criar uma função que lida com a tarefa de salvar imagens para o armazenamento.

abaixo da função validador, adicione a seguinte

a função storeImage armazena a imagem na pasta storage/app/public/profile e retorna um URL para o local de armazenamento do arquivo.

juntando tudo

como estamos adicionando mais coisas a serem feitas, precisamos substituir o método de registro padrão fornecido por laravel.

Laravel fornece uma característica para registrar usuários e pode ser encontrada em Illuminate\Foundation\Auth\RegistersUsers.php.

atualize o controlador de registro para incluir o seguinte:

como visto acima, a função create faz o trabalho de criar um usuário com base nos dados enviados a ele.

a função register é onde tudo acontece. A validação é realizada primeiro antes de qualquer outra coisa.

se a validação for aprovada, armazenamos a imagem. Depois disso, criamos o usuário passando todos os dados necessários em uma matriz, $data.

se tudo acontecer com sucesso, autenticamos o Usuário e redirecionamos para a página inicial.

mostrando a imagem carregada

a página inicial é onde exibiremos todos os detalhes do Usuário. Primeiro, vamos criar uma rota e um controlador para ela.

no terminal, execute o código para gerar o HomeController.

php artisan make:controller HomeController

vá para o recém-criado HomeController e adicione os seguintes métodos à classe.

no construtor, definimos que estamos usando o middleware auth. O que este middleware faz é que ele permite que apenas usuários autorizados acessem funções definidas na classe.

portanto, o Usuário só pode vir aqui se for autenticado. Se o Usuário não for autenticado, ele será redirecionado para a página de login.

a função show lida com a exibição da página inicial. Estamos passando o usuário autenticado para a visualização também. Para saber mais sobre isso, verifique a documentação do laravel.

atualize o arquivo de rotas para conter a rota inicial.

// web.php...Route::get('/home', '[email protected]')->name('home');

finalmente criar uma casa.lamina.arquivo php no diretório resources/views.

adicione o seguinte a home.lamina.php:

no arquivo de visualização, temos acesso aos dados user que foram passados do controlador.

atualmente, estamos usando uma imagem de espaço reservado para mostrar a foto do usuário porque a foto não está disponível para nós no momento.

precisamos criar um link simbólico a partir de public/storage para storage/app/public pasta para Laravel faz esta simples, fornecendo o artesão de comando:

php artisan storage:link

Depois de fazer isso, atualizar a tag de imagem para mostrar a imagem do perfil.

<img src="https://codesource.io/handling-file-uploads-in-laravel/amp/{{asset('storage/'.$user->photo)}}" class="card-img-top" alt="...">

Parabéns!!! Você aprendeu com sucesso como armazenar imagens no laravel.

conclusão

quase todos os aplicativos exigem o armazenamento de arquivos de uma forma ou de outra. Seguindo o guia acima, você deve ser capaz de armazenar imagens e qualquer outro arquivo no armazenamento local.Todo o código usado aqui pode ser encontrado aqui no Github.