Implementação de barra de progresso de upload de imagem usando axios

Axios é uma biblioteca HTTP baseada em promise, que pode ser usada tanto no navegador quanto no node.js.

Recursos

Criar XMLHttpRequests a partir do navegador

Criar solicitações HTTP a partir de node.js

Suporte a API Promise

Interceptar solicitações e respostas

Conversão de dados de solicitação e resposta

Cancelar solicitação

Conversão automática de dados JSON

Suporte ao bloqueio de XSRF no cliente

A seguir, apresentarei como usar o axios para implementar a função de barra de progresso de upload de imagens, conforme descrito abaixo:

　No recente projeto, uma página de telefone pode precisar upload de dezenas de imagens, apesar de terem sido feitas compressões nas fotos, no entanto, o tamanho final ainda é grande, se for através de uma rede, o tempo de upload é muito ruim, se estiver sempre carregando, o usuário nem sabe quantas imagens ele já uploadou, para melhor exibir o progresso do upload, é melhor mostrar a barra de progresso e a porcentagem de upload;

　　O projeto usa o framework vuejs, mint-ui como framework de ui; Faz a solicitação do axios recomendado pelo oficial do vue (realmente poderoso); No documento oficial do axios, foi介绍的用法 nativoEvento de progresso de uploadConsulte aqui (aqui há uma introdução oficial do axios em chinês):

 onUploadProgress: function (progressEvent) {
  // Tratamento do evento de progresso nativo
 },

　　Devido ao uso do vuejs, para facilitar a gestão, é necessário gerenciar uniformemente as solicitações de dados da interface. Se colocado em cada componente, não será conveniente para a manutenção e gestão futuras; No arquivo reqwest.js, foi definido um método uploadPhoto, que possui três parâmetros, respectivamente, os parâmetros, e duas funções de callback. Os parâmetros são os dados necessários para o upload da imagem; O primeiro callback é para obter os dados do progresso do upload, e o segundo callback é para obter os dados de sucesso ou falha do upload, retornados pelo servidor, para realizar a próxima operação na página.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //Evento nativo de progresso de upload
        if(progressEvent.lengthComputable){
          //A propriedade lengthComputable principal indica se a quantidade total de trabalho a ser concluído e a quantidade de trabalho concluída podem ser medidas
          //Se lengthComputable for false, não será possível obter progressEvent.total e progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

usando mint-o componente Progress dentro do ui, define a variável precent no método data, que é do tipo number. Ao definir, note que;　

<mt-progress :value="precent" :bar-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

Importe o arquivo reqwest.js, obtenha o método uploadPhoto, use a propriedade $nextTick para atualizar em tempo real a página com base no progresso de upload.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   }
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('Upload de imagem bem-sucedido').then(action => {
     console.log('ok');
    });
  }
}

　　Basicamente, conforme o método mencionado acima, foi implementado o progresso de upload de imagens e a exibição de porcentagem. O que resta é o ui, personalize conforme necessário para atender às suas necessidades perfeitas...

Resumo

O que foi mencionado acima é a introdução do editor sobre como usar axios para implementar a barra de progresso de upload de imagens, esperando ajudar a todos. Se você tiver alguma dúvida, por favor, deixe um comentário, o editor responderá a todos a tempo. Agradecemos também o apoio da comunidade ao site Tutorial de Grito!

Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo detentor dos direitos autorais, foi submetido e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)