Uniapp implémente le téléchargement de la barre de progression

Avec la popularité de l'Internet mobile, de plus en plus d'applications nécessitent le téléchargement de fichiers, tels que des avatars, des photos, des documents, etc. Pendant le processus de téléchargement de fichiers, les utilisateurs doivent souvent attendre un certain temps pour terminer le téléchargement. À ce stade, la barre de progression est une très bonne méthode d'affichage. Ces dernières années, uniapp est devenu l'un des frameworks les plus populaires pour le développement mobile. Cet article explique comment utiliser uniapp pour implémenter la fonction de téléchargement de fichiers avec une barre de progression.

1. Connaissances préalables

Avant d'étudier cet article en profondeur, vous devez maîtriser les compétences suivantes :

1. Utilisation de base d'uniapp
2. Comment utiliser la requête asynchrone ajax
3. Opérations de base de téléchargement de fichiers

2. Travail de préparation

Tout d'abord, assurez-vous que vue-cli est installé, puis utilisez vue-cli pour créer un projet uniapp. Étant donné que cet article explique principalement l'implémentation de la fonction de téléchargement de fichiers, il n'impliquera pas l'implémentation d'autres fonctions.

3. Processus de mise en œuvre

1. Créer un composant de téléchargement de fichiers et un composant de barre de progression

1.1 Créer un composant de téléchargement de fichiers

Dans le framework uniapp, la fonction de téléchargement de fichiers peut être facilement implémentée en utilisant le contrôle uni-upload. Créez un composant Upload sous le dossier des composants. Le code est le suivant :

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" />
  </view>
</template>

<script>
export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="scss">
.upload-btn {
  width: 100px;
  height: 50px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
}
</style>

1.2 Créer un composant de barre de progression

L'utilisation du composant uni-progress dans la bibliothèque de composants uniui peut facilement implémenter la fonction de barre de progression. Créez un composant ProgressBar dans le dossier des composants. Le code est le suivant :

<template>
  <view>
    <uni-progress :percent="percent" />
  </view>
</template>

<script>
export default {
  name: "ProgressBar",
  props: {
    percent: {
      type: Number,
      default: 0
    }
  }
};
</script>

2. Implémentez la fonction de barre de progression du téléchargement

2.1 Obtenez la progression du téléchargement du fichier

Pendant le processus de téléchargement du fichier, le serveur renverra la progression du téléchargement en conséquence. . Nous pouvons obtenir la progression du téléchargement en écoutant l'événement progress de l'objet XMLHttpRequest. Ajoutez le code suivant au composant Upload :

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" @change="onChange" />
    <ProgressBar :percent="percent" />
  </view>
</template>

<script>
import ProgressBar from "../components/ProgressBar";

export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  },
  components: {
    ProgressBar
  },
  data() {
    return {
      percent: 0,
      uploadRequest: null
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.uploadRequest = this.uploadFile(file);
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);
      const xhr = new XMLHttpRequest();
      xhr.open("POST", this.uploadUrl);
      xhr.upload.addEventListener("progress", this.updateProgress);
      xhr.send(formData);
      return xhr;
    },
    updateProgress(e) {
      const percent = ((e.loaded / e.total) * 100).toFixed(2);
      this.percent = percent;
    }
  }
};
</script>

Dans la méthode uploadFile, utilisez l'objet XMLHttpRequest pour créer une requête POST et écoutez l'événement de progression de l'attribut upload de l'objet XMLHttpRequest. Chaque fois qu'un événement de téléchargement se produit, la méthode updateProgress sera déclenchée pour mettre à jour le pourcentage de données dans le composant.

2.2 Annuler le téléchargement du fichier

Pendant le processus de téléchargement du fichier, l'utilisateur devra peut-être annuler l'opération de téléchargement. Afin de prendre en charge l'opération d'annulation, nous devons ajouter un bouton d'annulation au composant Upload, ainsi qu'une logique d'annulation de téléchargement à la méthode uploadFile.

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" @change="onChange" />
    <ProgressBar :percent="percent" />
    <view class="controls">
      <view class="btn" @click="cancelUpload">取消上传</view>
    </view>
  </view>
</template>

<script>
import ProgressBar from "../components/ProgressBar";

export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  },
  components: {
    ProgressBar
  },
  data() {
    return {
      percent: 0,
      uploadRequest: null
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.uploadRequest = this.uploadFile(file);
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);
      const xhr = new XMLHttpRequest();
      xhr.open("POST", this.uploadUrl);
      xhr.upload.addEventListener("progress", this.updateProgress);
      xhr.send(formData);
      return xhr;
    },
    updateProgress(e) {
      const percent = ((e.loaded / e.total) * 100).toFixed(2);
      this.percent = percent;
    },
    cancelUpload() {
      if (this.uploadRequest) {
        this.uploadRequest.abort();
      }
    }
  }
};
</script>

<style lang="scss">
.controls {
  margin-top: 10px;
}

.btn {
  background-color: #ff4949;
  color: #fff;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
</style>

Lorsque l'utilisateur clique sur le bouton Annuler le téléchargement, la méthode CancelUpload sera exécutée. À ce moment, l'opération de téléchargement sera annulée en appelant la méthode abort de l'objet XMLHttpRequest.

4. Résumé

Dans cet article, nous avons implémenté une fonction de barre de progression de téléchargement de fichiers en utilisant le framework uniapp combiné avec des composants de la bibliothèque de composants uniui. Avec l'événement onprogress de l'objet XMLHttpRequest, nous pouvons obtenir la progression du téléchargement dans le temps et annuler l'opération de téléchargement en appelant la méthode abort de l'objet XMLHttpRequest. Cette petite fonctionnalité peut non seulement augmenter l'expérience utilisateur de l'application, mais également aider les développeurs à mieux comprendre l'utilisation des objets XMLHttpRequest et les principes de base du framework uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!