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.
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 enctype
ao 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
oumin: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.
Leave a Reply