uniapp implementiert den Fortschrittsbalken-Upload

Mit der Popularität des mobilen Internets erfordern immer mehr Anwendungen das Hochladen von Dateien wie Avataren, Fotos, Dokumenten usw. Während des Datei-Upload-Vorgangs müssen Benutzer häufig eine gewisse Zeit warten, bis der Upload abgeschlossen ist. Zu diesem Zeitpunkt ist der Fortschrittsbalken eine sehr gute Anzeigemethode. In den letzten Jahren hat sich Uniapp zu einem der beliebtesten Frameworks für die mobile Entwicklung entwickelt. In diesem Artikel wird erläutert, wie Sie mit Uniapp die Funktion zum Hochladen von Dateien mit einem Fortschrittsbalken implementieren.

1. Vorkenntnisse

Bevor Sie diesen Artikel eingehend studieren, müssen Sie die folgenden Fähigkeiten beherrschen:

1. Grundlegende Verwendung von Uniapp
2. So verwenden Sie die asynchrone Ajax-Anfrage
3. Grundlegende Vorgänge beim Hochladen von Dateien

2. Vorbereitungsarbeiten

Stellen Sie zunächst sicher, dass vue-cli installiert ist, und verwenden Sie dann vue-cli, um ein Uniapp-Projekt zu erstellen. Da in diesem Artikel hauptsächlich die Implementierung der Datei-Upload-Funktion erläutert wird, wird die Implementierung anderer Funktionen nicht berücksichtigt.

3. Implementierungsprozess

1. Datei-Upload-Komponente und Fortschrittsbalkenkomponente erstellen

1.1 Datei-Upload-Komponente erstellen

Im Uniapp-Framework kann die Datei-Upload-Funktion einfach mithilfe der Uni-Upload-Steuerung implementiert werden. Erstellen Sie eine Upload-Komponente im Komponentenordner. Der Code lautet wie folgt:

<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 Erstellen Sie eine Fortschrittsbalkenkomponente.

Mit der Uni-Progress-Komponente in der Uniui-Komponentenbibliothek können Sie die Fortschrittsbalkenfunktion einfach implementieren. Erstellen Sie eine ProgressBar-Komponente unter dem Komponentenordner. Der Code lautet wie folgt:

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

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

2. Implementieren Sie die Upload-Fortschrittsbalkenfunktion

2.1 Erhalten Sie den Datei-Upload-Fortschritt

Während des Datei-Upload-Vorgangs gibt der Server den Upload-Fortschritt entsprechend zurück . Wir können den Upload-Fortschritt ermitteln, indem wir das Fortschrittsereignis des XMLHttpRequest-Objekts abhören. Fügen Sie der Upload-Komponente den folgenden Code hinzu:

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

Verwenden Sie in der uploadFile-Methode das XMLHttpRequest-Objekt, um eine POST-Anfrage zu erstellen und das Fortschrittsereignis des Upload-Attributs des XMLHttpRequest-Objekts abzuhören. Immer wenn ein Upload-Ereignis auftritt, wird die updateProgress-Methode ausgelöst, um die Prozentdaten in der Komponente zu aktualisieren.

2.2 Datei-Upload abbrechen

Während des Datei-Upload-Vorgangs muss der Benutzer möglicherweise den Upload-Vorgang abbrechen. Um den Abbruchvorgang zu unterstützen, müssen wir der Upload-Komponente eine Abbruchschaltfläche hinzufügen und außerdem der uploadFile-Methode eine Upload-Abbruchlogik hinzufügen.

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

Wenn der Benutzer auf die Schaltfläche „Upload abbrechen“ klickt, wird die Methode cancelUpload ausgeführt. Zu diesem Zeitpunkt wird der Upload-Vorgang durch Aufrufen der Abort-Methode des XMLHttpRequest-Objekts abgebrochen.

4. Zusammenfassung

In diesem Artikel haben wir eine Funktion zum Hochladen von Dateien mithilfe des Uniapp-Frameworks in Kombination mit Komponenten in der Uniui-Komponentenbibliothek implementiert. Mit dem onprogress-Ereignis des XMLHttpRequest-Objekts können wir den Upload-Fortschritt rechtzeitig abrufen und den Upload-Vorgang abbrechen, indem wir die Abort-Methode des XMLHttpRequest-Objekts aufrufen. Diese kleine Funktion kann nicht nur die Benutzererfahrung der Anwendung verbessern, sondern Entwicklern auch dabei helfen, die Verwendung von XMLHttpRequest-Objekten und die Grundprinzipien des Uniapp-Frameworks besser zu verstehen.

Das obige ist der detaillierte Inhalt vonuniapp implementiert den Fortschrittsbalken-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!