Comment implémenter la fonction de glisser et de télécharger des fichiers avec barre de progression dans Vue-js tutoriel-php.cn

Cet article présente principalement la fonction de glissement et de téléchargement de fichiers avec barre de progression implémentée par Vue. Cet article vous la présente en détail à travers un exemple de code et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

. 1. Interface de base

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
 <style>
  .dropbox {
   border: .25rem dashed #007bff;
   min-height: 5rem;
  }
 </style>
 <title>Document</title>
</head>
<body>
<p id="app" class="m-5">
 <p class="dropbox p-3">
  <h2 class="text-center">把要上传的文件拖动到这里</h2>
 </p>
</p>
<script>
 new Vue({
  el: &#39;#app&#39;,
  data: {},
  methods: {},
  mounted: function () {}
 });
</script>
</body>
</html>

Copier après la connexion

2. >Laissez d'abord la page prendre en charge le déplacement de fichiers, ajoutez du code dans la fonction Mounted() de Vue :

Lorsque vous faites glisser un fichier vers la zone de déplacement du navigateur, il sera Trois les événements sont déclenchés :

mounted: function () {
 var dropbox = document.querySelector(&#39;.dropbox&#39;);
 dropbox.addEventListener(&#39;dragenter&#39;, this.onDrag, false);
 dropbox.addEventListener(&#39;dragover&#39;, this.onDrag, false);
 dropbox.addEventListener(&#39;drop&#39;, this.onDrop, false);
}

Copier après la connexion

est ajoutée à l'objet méthodes de Vue : Dans la fonction

onDrop(), les fichiers glissés par l'utilisateur vers le navigateur peuvent être obtenus via e.dataTransfer.files Les informations de base de la fonction uploadFile() n'impriment désormais que ces informations. On peut comprendre que chaque fichier glissé vers le navigateur est un objet File :

methods: {
 uploadFile: function (file) {
  console.log(file);
 },
 onDrag: function (e) {
  e.stopPropagation();
  e.preventDefault();
 },
 onDrop: function (e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  for (var i = 0; i !== dt.files.length; i++) {
   this.uploadFile(dt.files[i]);
  }
 }
},

Copier après la connexion

<. 🎜>

3. Gérer les événements de glisser

Maintenant, nous devons ajouter des fonctions à la fonction uploadFile() pour que lorsque vous faites glisser un fichier, le nom du fichier et un le téléchargement apparaîtra dans la barre de progression de la zone de glisser.

Définissez d'abord l'attribut files dans l'objet de données de Vue, qui est utilisé pour enregistrer les noms de tous les fichiers glissés vers le navigateur. Ensuite, chaque fois que la fonction uploadFile() est appelée, enregistrez le nom du fichier et téléchargez la progression vers les fichiers :

La fonction de progression du téléchargement sera introduite plus tard, écrivez d'abord une valeur fixe.

data: {
 files: []
},
methods: {
 uploadFile: function (file) {
  var item = {
   name: file.name,
   uploadPercentage: 67
  };
  this.files.push(item);
 },
}

Copier après la connexion

En conséquence, dans le code HTML, utilisez le mot-clé v-for pour afficher chaque élément de fichier :

Et "Faites glisser le fichier à télécharger ici" L'invite est uniquement affiché lorsqu'il n'y a pas de fichier dans la zone de glisser :

<p class="dropbox p-3">
 <h2 class="text-center">把要上传的文件拖动到这里</h2>
 <p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
  <h5 class="mt-0">{{ file.name }}</h5>
  <p class="progress">
   <p class="progress-bar progress-bar-striped"
     :style="{ width: file.uploadPercentage+&#39;%&#39; }"></p>
  </p>
 </p>
</p>

Copier après la connexion

Faites glisser le fichier à télécharger ici

De cette façon, l'effet de glisser sera là ：<h2 v-if="files.length===0" class="text-center">

4. Téléchargement de fichiers

Ensuite, pour implémenter le téléchargement de fichiers réels, continuez à télécharger le code d'ajout de la fonction uploadFile(). :

FormData est utilisé ici, le fichier à télécharger est joint à FormData et envoyé côté PHP via AJAX. Code côté PHP :

uploadFile: function (file) {
 var item = {
  name: file.name,
  uploadPercentage: 67
 };
 this.files.push(item);
 var fd = new FormData();
 fd.append(&#39;myFile&#39;, file);

 var xhr = new XMLHttpRequest();
 xhr.open(&#39;POST&#39;, &#39;upload.php&#39;, true);
 xhr.send(fd);
},

Copier après la connexion

Actualisez maintenant la page et faites glisser les deux fichiers de votre ordinateur dans le navigateur. Le côté PHP recevra et enregistrera les fichiers dans le répertoire de téléchargement :

if (isset($_FILES[&#39;myFile&#39;])) {
 move_uploaded_file($_FILES[&#39;myFile&#39;][&#39;tmp_name&#39;], &#39;uploads/&#39; . $_FILES[&#39;myFile&#39;][&#39;name&#39;]);
 echo &#39;OK&#39;;
} else {
 echo &#39;No file specified&#39;;
}

Copier après la connexion

<. 🎜 >

Astuce : Si PHP renvoie Aucun fichier spécifié lors du glisser-déposer, ou si $_FILES est NULL, il est possible que PHP limite le nombre maximum d'octets de la requête POST, ou limite la taille du fichier téléchargé. . A ce moment, vous devez ajuster ces deux configurations dans php.ini :

Affichage de la barre de progression

post_max_size = 20M // POST请求的最大字节数
upload_max_filesize = 20M // 上传文件的最大体积

Copier après la connexion

Fonction de téléchargement de base Terminé, complétons enfin la barre de progression. Chaque fois qu'une requête AJAX envoie des données pendant une période de temps, un événement de progression sera généré. Nous pouvons écouter l'événement de progression pour connaître la progression actuelle du téléchargement :

e.loaded représente le nombre d'octets. actuellement envoyé par AJAX, e.total représente le nombre total d'octets envoyés par AJAX. Ces deux propriétés vous permettent de calculer le pourcentage de progression du téléchargement.

De cette manière, une fonction de glisser et de télécharger des fichiers avec une barre de progression est complétée.

uploadFile: function (file) {
  ...
  xhr.upload.addEventListener(&#39;progress&#39;, function (e) {
    item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
  }, false);
  xhr.send(fd);
},

Copier après la connexion

Pièce jointe : Le code complet

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <style>
    .dropbox {
      border: .25rem dashed #007bff;
      min-height: 5rem;
    }
  </style>
  <title>Document</title>
</head>
<body>
<p id="app" class="m-5">
  <p class="dropbox p-3">
    <h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>
    <p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
      <h5 class="mt-0">{{ file.name }}</h5>
      <p class="progress">
        <p class="progress-bar progress-bar-striped"
           :style="{ width: file.uploadPercentage+&#39;%&#39; }"></p>
      </p>
    </p>
  </p>
</p>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data: {
      files: []
    },
    methods: {
      uploadFile: function (file) {
        var item = {
          name: file.name,
          uploadPercentage: 0
        };
        this.files.push(item);
        var fd = new FormData();
        fd.append(&#39;myFile&#39;, file);
        var xhr = new XMLHttpRequest();
        xhr.open(&#39;POST&#39;, &#39;upload.php&#39;, true);
        xhr.upload.addEventListener(&#39;progress&#39;, function (e) {
          item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
        }, false);
        xhr.send(fd);
      },
      onDrag: function (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop: function (e) {
        e.stopPropagation();
        e.preventDefault();
        var dt = e.dataTransfer;
        for (var i = 0; i !== dt.files.length; i++) {
          this.uploadFile(dt.files[i]);
        }
      }
    },
    mounted: function () {
      var dropbox = document.querySelector(&#39;.dropbox&#39;);
      dropbox.addEventListener(&#39;dragenter&#39;, this.onDrag, false);
      dropbox.addEventListener(&#39;dragover&#39;, this.onDrag, false);
      dropbox.addEventListener(&#39;drop&#39;, this.onDrop, false);
    }
  });
</script>
</body>
</html>

Copier après la connexion

Comment implémenter la boîte de dialogue dans Vue

Comment utiliser la méthode d'opération de compilation dans Vue

À propos de l'événement de fermeture de la boîte de dialogue el-dialog dans l'élément ui (tutoriel détaillé)

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!