Implementazione della funzione di progresso dell'upload delle immagini utilizzando axios

Axios è una libreria HTTP basata su promise, che può essere utilizzata sia nel browser che in node.js.

Caratteristiche

Creazione di XMLHttpRequests dal browser

Creazione di richieste HTTP da node.js

Supporto API Promise

Intercettazione delle richieste e delle risposte

Conversione dei dati di richiesta e risposta

Annullamento della richiesta

Conversione automatica dei dati JSON

Il client supporta la difesa XSRF

Di seguito vi presenterò come utilizzare axios per implementare la funzione di barra di progresso del caricamento delle immagini, la descrizione dettagliata è come segue:

　Nella recente progetto, una pagina di cellulare deve caricare fino a decine di immagini, anche se le immagini sono state compressi, ma alla fine sono ancora molto grandi, se la rete è lenta, il tempo di caricamento è molto lungo, se è sempre in carica, l'utente non sa quanti dati ha caricato, per mostrare più chiaramente il progresso del caricamento, è meglio mostrare la barra di progresso e il percentuale di caricamento;

　　Il progetto utilizza il framework vuejs, con mint-ui come framework UI; la richiesta è quella di axios raccomandato ufficialmente da vue (è davvero potente); nella documentazione ufficiale di axios è illustrato l'uso degli eventi nativiEvento di progressione di uploadEcco un esempio dettagliato (qui c'è la documentazione ufficiale in cinese di axios):

 onUploadProgress: function (progressEvent) {
  // Gestione dell'evento di progressione nativo
 ,

　　Poiché utilizziamo vuejs, per la gestione conveniente delle richieste di dati dell'interfaccia, è necessario avere una gestione unificata. Se vengono messi in ogni componente, non è conveniente per la manutenzione e gestione futura; nel file reqwest.js, è definito un metodo uploadPhoto, il quale ha tre parametri, ovvero i parametri necessari per l'upload dell'immagine, e due funzioni di callback, la quale è per ottenere i dati della progressione dell'upload, e il secondo callback è per ottenere i dati di successo o fallimento dell'upload, i dati restituiti dal server per procedere con il passo successivo della pagina.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ // Evento nativo di ottenimento della progressione di upload
        if(progressEvent.lengthComputable){
          // L'attributo lengthComputable indica se la quantità totale di lavoro e la quantità di lavoro completata possono essere misurate
          // Se lengthComputable è false, non è possibile ottenere progressEvent.total e progressEvent.loaded
          callback1(progressEvent);
        }
      ,
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    )
  }

Utilizzando il componente Progress del pacchetto mint-ui, definisci la variabile precent nel metodo data del componente, la quale è di tipo number. Presta attenzione quando la definisci;　

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

Importa il file reqwest.js, ottieni il metodo uploadPhoto e utilizza l'attributo $nextTick per aggiornare in tempo reale la pagina in base al progresso dell'upload.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   )
}
  if(res.code === '200'){
    MessageBox.alert('L'upload dell'immagine è stato completato').then(action => {
     console.log('ok');
    });
  }
)

　　Secondo il metodo sopra descritto, è stato implementato il progresso dell'upload delle immagini e la visualizzazione del百分比. Ora ci resta solo l'interfaccia utente, che può essere personalizzata per soddisfare le tue esigenze perfette...

Sommario

Come sopra descritto, l'autore ha introdotto come utilizzare axios per implementare la funzione di progress bar per l'upload delle immagini, sperando che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento, l'autore risponderà tempestivamente. In questo momento, anche grazie per il supporto al sito web delle guide di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.