Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Muitos aplicativos dependem da web para seu conteúdo. Ao hospedar ativos de imagem em uma plataforma de nuvem de terceiros, você pode garantir que seus aplicativos tenham acesso rápido e eficiente a eles.

Além disso, você evitará os custos de armazenamento e largura de banda em que incorreria hospedando os ativos usando servidores locais. É por isso que as soluções de nuvem de hospedagem de imagens, como Cloudinary, tornaram-se cada vez mais populares.

Acompanhe para saber como usar o Cloudinary para hospedar seus ativos de imagem.

O que é hospedagem de imagens e por que é importante?

A hospedagem de imagens é um tipo de serviço de hospedagem na web que permite armazenar e acessar seus ativos de imagem ou outras mídias digitais em uma plataforma de nuvem de terceiros.

Ativos de mídia, como imagens, são essenciais para criar uma ótima experiência do usuário para qualquer aplicativo da web. Os serviços de hospedagem de imagens facilitam o upload, o armazenamento, a recuperação e o gerenciamento de seus ativos na nuvem, consequentemente, aprimorando o desempenho do seu aplicativo, garantindo tempos de carregamento mais rápidos e melhor imagem qualidade.

O que é Cloudinário?

Cloudinary é uma plataforma de gerenciamento de mídia baseada em nuvem. Ele fornece recursos que facilitam o upload, armazenamento e gerenciamento de ativos de mídia digital, como imagens e vídeos. Essencialmente, o Cloudinary facilita o gerenciamento de todas as suas mídias digitais necessárias para qualquer aplicativo de uma plataforma.

Configurar um projeto Cloudinary para hospedar arquivos de imagem

Para começar a carregar e hospedar arquivos de imagem, inscreva-se em um Cloudinário conta.

Faça login no painel da sua conta e clique na guia do ícone de configurações no painel de menu à esquerda.

Na página de configurações, clique no botão Carregar botão para abrir a página de configurações de upload.

Agora, dirija-se ao Carregar predefinições seção de configurações e clique em Adicionar predefinição de upload para criar uma nova predefinição de upload para seu aplicativo.

Uma predefinição de upload é uma configuração de parâmetros que definem a estrutura padrão de qualquer arquivo de mídia que você carrega no Cloudinary. Eles permitem que você defina um conjunto de regras a serem aplicadas sempre que fizer upload de um arquivo de mídia.

Os parâmetros predefinidos garantem que o Cloudinary otimize todos os arquivos de mídia para entrega ao seu aplicativo, melhorando o desempenho e reduzindo o tempo de carregamento.

Preencha o nome da sua predefinição e selecione não assinado modo no menu suspenso exibido. Os modos de assinatura permitem que você especifique os métodos que o Cloudinary usa para autenticar e autorizar qualquer upload de mídia.

Selecionar o modo não assinado permitirá que você faça uploads para seu armazenamento Cloudinary de seus aplicativos sem autenticação com Cloudinary. Simplificando, este modo permite selecionar uma imagem e carregá-la diretamente de seu aplicativo. Cloudinary irá entregá-lo mediante solicitação.

Depois de fazer essas alterações, vá em frente e clique em Salvar para criar a predefinição de upload.

Crie um aplicativo React de demonstração

Você pode configurar um aplicativo React simples para lidar com a funcionalidade de upload usando o endpoint da API Cloudinary e o widget de upload.

Para começar, criar um aplicativo React de demonstração. Em seguida, execute o comando abaixo para ativar o servidor de desenvolvimento e navegue até http://localhost: 3000 no seu navegador para ver os resultados.

npm start

Em seguida, execute este comando para instalar o Axios, uma biblioteca JavaScript usada para fazer solicitações HTTP do navegador.

npm instalar axios

Carregar arquivos de imagem usando Cloudinary API Endpoint

Depois de configurar o aplicativo React, crie um componente de upload que faça uma solicitação POST ao ponto de extremidade da API do Cloudinary para fazer upload de arquivos de imagem no armazenamento em nuvem do Cloudinary. Em seguida, você desestruturará a resposta da API para exibir a imagem carregada.

Criar um componente de upload

No diretório /src, crie uma nova pasta e nomeie-a, components. Nesta pasta, crie um novo arquivo, Upload.js.

No arquivo Upload.js, adicione o código abaixo:

importar Reagir, {useState} de'reagir';
importar Axios de"axios";
funçãoCarregar() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")


const handleUpload = (e) => {
 e.preventDefault();
const formDados = novo FormData ();
 formData.append("arquivo", subir arquivo);
 formData.append("upload_preset", "seu nome predefinido de upload");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary cloud name/image/upload",
 formData
 )
 .então((resposta) => {
console.log (resposta);
 setCloudinaryImage (response.data.secure_url);
 })
 .pegar((erro) => {
console.log (erro);
 });
 };
retornar ( 
"Aplicativo"> 
"lado esquerdo"> 


 Carregar imagens para Cloudinary Cloud Storage</h3>


"arquivo"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>

Veja o que o código de upload faz:

  • Declara dois estados, subir arquivo e cloudinaryImage. Ele os usa para armazenar o arquivo carregado e a imagem resultante do Cloudinary.
  • O campo de entrada permite selecionar um arquivo de imagem do sistema de arquivos de sua máquina. Quando você seleciona um arquivo, ele atualiza o valor da variável uploadFile.
  • O handleUpload função usa Axios para fazer uma solicitação de postagem para Cloudinary. Ele passa o arquivo carregado e a predefinição de upload que você associou à sua conta da nuvem Cloudinary. Clicar no botão enviar chama essa função.
  • Quando o código recebe uma resposta, ele armazena o url_seguro da imagem Cloudinary no estado.
  • Por fim, renderiza duas seções, uma para carregar o arquivo e outra para exibir a imagem resultante.

Importe e renderize o componente upload.js em seu arquivo app.js. Você deve ver uma resposta como esta em seu navegador depois de selecionar e carregar o arquivo de imagem:

Dirija-se à sua conta Cloudinary e clique no botão Biblioteca de mídia guia para visualizar o arquivo carregado.

Integrar o widget Cloudinary em seu aplicativo React simplifica significativamente o processo de upload. Além disso, o widget permite fazer upload de arquivos de imagem de várias fontes, como o Dropbox.

Para integrar o widget em seu aplicativo React, primeiro você precisa incluir a biblioteca JavaScript remota do widget em seu arquivo index.html no diretório /public. Adicione a tag script abaixo na seção head de seu arquivo index.html.

<roteiroorigem=" https://upload-widget.cloudinary.com/global/all.js"
 digite="texto/javascript">roteiro>

Em seguida, em seu arquivo upload.js, adicione as seguintes alterações:

  • Importe o seguinte Ganchos de reação: useEffect e useRef. 
    importar {useState, useEffect, useRef} de'reagir';
  • Adicione o código abaixo: 
    const cloudinaryRef = useRef();
    const widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = janela.cloudinary;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     cloudName: 'seu nome de nuvem cloudinary', 
     uploadPreset: 'o nome da predefinição de upload'
     }, (erro, resultado) => { 
    console.log (erro, resultado)
     });
     }, []);
    O código acima cria uma referência ao objeto Cloudinary e ao widget de upload usando o gancho useRef. O gancho useEffect executa o código dentro do retorno de chamada uma vez quando o componente é montado. Em seguida, você inicializa o widget usando seu nome de nuvem e carrega o nome predefinido e registra os resultados e erros que podem ocorrer no widget.
  • Por fim, crie um botão que, quando clicado, invocará e abrirá o widget de upload.

Aproveitando ao máximo o Cloudinary

Cloudinary fornece uma solução amigável que simplifica o processo de gerenciamento de arquivos de imagem e outros ativos de mídia.

Além de fornecer uma plataforma de armazenamento em nuvem, o Cloudinary também oferece recursos como transformações e otimização de imagens. Essas são ferramentas essenciais para melhorar a qualidade de seus ativos de mídia.