So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien mit Fortschrittsbalken in Vue-js-Tutorial-php.cn

So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien mit Fortschrittsbalken in Vue

亚连

Freigeben： 2018-06-05 11:52:08

Original

2346 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierung der Funktion zum Ziehen und Hochladen von Dateien mit einem Fortschrittsbalken vorgestellt. Dieser Artikel stellt es Ihnen ausführlich anhand von Beispielcode vor und hat Referenzwert >

1. Grundlegende Benutzeroberfläche

<!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>

Nach dem Login kopieren

2. Drag-Ereignisse erkennen Lassen Sie die Seite zunächst das Ziehen von Dateien unterstützen und fügen Sie Code in der mount()-Funktion von Vue hinzu:

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);
}

Nach dem Login kopieren

Wenn eine Datei in den Drag-Bereich des Browsers gezogen wird, werden drei Ereignisse ausgelöst :

ausgelöst

wird dem Methodenobjekt von Vue hinzugefügt: In der Funktion

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]);
  }
 }
},

Nach dem Login kopieren

onDrop() können Sie die grundlegenden Informationen der Datei abrufen, die der Benutzer in die Datei gezogen hat Browser über e.dataTransfer.files Informationen, die Funktion uploadFile() gibt jetzt nur diese Informationen aus. Es ist ersichtlich, dass jede in den Browser gezogene Datei ein Dateiobjekt ist:

3. Drag-Ereignisse verarbeitenJetzt müssen wir der Funktion uploadFile() Funktionen hinzufügen, damit beim Ziehen einer Datei der Dateiname und ein Der Upload-Fortschrittsbalken wird im Ziehbereich angezeigt.

Definieren Sie zunächst das Dateiattribut im Datenobjekt von Vue, das zum Speichern der Namen aller in den Browser gezogenen Dateien verwendet wird. Speichern Sie dann bei jedem Aufruf der Funktion „uploadFile()“ den Dateinamen und laden Sie den Fortschritt in die Dateien hoch:

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

Nach dem Login kopieren

Die Funktion „Upload-Fortschritt“ wird später eingeführt. Schreiben Sie zunächst einen festen Wert.

Verwenden Sie entsprechend im HTML-Code das Schlüsselwort v-for, um jedes Dateielement anzuzeigen:

<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>

Nach dem Login kopieren

Darüber hinaus wird nur die Eingabeaufforderung „Ziehen Sie die hochzuladende Datei hierher“ angezeigt wird angezeigt, wenn sich keine Datei im Drag-Bereich befindet:

Ziehen Sie die hochzuladende Datei hierher

<h2 v-if="files.length===0" class="text-center">Auf diese Weise wird der Drag-Effekt wie folgt aussehen:

4. Datei-UploadAls nächstes implementieren Sie den eigentlichen Datei-Upload und fahren mit der Funktion uploadFile() fort Code:

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);
},

Nach dem Login kopieren

FormData wird hier verwendet, die hochzuladende Datei wird an FormData angehängt und über AJAX an die PHP-Seite gesendet. PHP-Seitencode:

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;;
}

Nach dem Login kopieren

Aktualisieren Sie nun die Seite und ziehen Sie die beiden Dateien auf Ihrem Computer in den Browser. Die PHP-Seite empfängt und speichert die Dateien im Upload-Verzeichnis:

Tipp: Wenn PHP beim Ziehen und Ablegen „Keine Datei angegeben“ zurückgibt oder $_FILES NULL ist, begrenzt PHP möglicherweise die maximalen Bytes der POST-Anfrage oder die Größe der hochgeladenen Datei. Zu diesem Zeitpunkt müssen Sie diese beiden Konfigurationen in php.ini anpassen:

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

Nach dem Login kopieren

Anzeige des FortschrittsbalkensDie grundlegende Upload-Funktion ist abgeschlossen und schließlich vervollständigen wir den Fortschrittsbalken. Immer wenn eine AJAX-Anfrage für einen bestimmten Zeitraum Daten sendet, wird ein Fortschrittsereignis generiert, um den aktuellen Upload-Fortschritt zu erfahren:

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

Nach dem Login kopieren

e.loaded gibt an, wie viele Bytes derzeit gesendet werden Bei AJAX stellt e.total die Gesamtzahl der von AJAX gesendeten Bytes dar. Mit diesen beiden Eigenschaften können Sie den Prozentsatz des Upload-Fortschritts berechnen.

Auf diese Weise ist eine Funktion zum Ziehen und Hochladen von Dateien mit einem Fortschrittsbalken abgeschlossen.

Anhang: Der vollständige Code

<!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>

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie das Dialogfeld in Vue

So verwenden Sie die Kompilierungsoperationsmethode in Vue

Über das Dialogfeld el-dialog-Abschlussereignis in Element UI (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien mit Fortschrittsbalken in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!