Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten

<Vorlage>
 <div Klasse="Dashboard-Editor-Container">
 <el-hochladen
  Klasse="Upload-Demo"
  Aktion=""
  ref="hochladen"
  :file-list="Dateiliste"
  :Grenze="2"
  :on-change="Handleänderung"
  :on-remove="handleEntfernen"
  :auto-upload="false"
  akzeptieren=""
 >
  <el-button slot="trigger" size="small" type="primary">Datei auswählen</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitForm">Auf Server hochladen</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="resumeUpload">Weiter</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="stopUplosd">Pause</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="abortMultipartUpload">Slice löschen</el-button>
 </el-upload>
 <el-progress :percentage="Prozentsatz" :status="uploadStatus"></el-progress>
 </div>
</Vorlage>

<Skript>
 let OSS = require('ali-oss') // Ali-OSS-Plugin importieren const client = new OSS({
 Region: „oss-cn-shanghai“, //Geben Sie den Wert basierend auf Ihrem Bucket-Standort ein. AccessKeyId: „LTA*********RaXY“, //AccessKeyId Ihres Kontos
 accessKeySecret: 'uu1************GiS', //accessKeySecret Ihres eigenen Kontos
 Bucket: 'a******o', //Bucket-Name});
Standard exportieren {
 Daten () {
 zurückkehren {
  Dateiliste:[],
  Datei: null,
  tempCheckpoint: null, // wird verwendet, um den aktuellen Slice-Inhalt zwischenzuspeichern uploadId: '',
  uploadStatus: null, // Fortschrittsbalken Upload-Status in Prozent: 0, // Fortschrittsbalken in Prozent uploadName: '', // Vollständiger Pfad des Buckets, in dem sich das Objekt befindet}
 },
 montiert() {
 // window.addEventListener('online', this.resumeUpload);
 },
 Methoden: {
 // Klicken, um auf den Server hochzuladen submitForm(file) {
  dies.multipartUpload();
 },
 // Das mehrteilige Upload-Ereignis abbrechen async abortMultipartUpload() {
  window.removeEventListener('online', this.resumeUpload)
  const name = this.uploadName; // Der vollständige Pfad des Buckets, in dem sich das Objekt befindet.
  const uploadId = this.upload; // UploadId in mehreren Teilen hochladen.
  const Ergebnis = warte auf Client.abortMultipartUpload(Name, UploadId);
  console.log(Ergebnis, '=======Slice löschen====');
 },
 // Mehrteiligen Upload anhalten.
 stopUplosd () {
  window.removeEventListener('online', this.resumeUpload) // Ereignis-Listener bei Pause löschen let result = client.cancel();
  console.log(Ergebnis, '----------- Hochladen anhalten -----------')
 },
 // Slice-Upload async multipartUpload () {
  wenn (!diese.datei) {
  this.$message.error('Bitte wählen Sie eine Datei aus')
  zurückkehren
  }
  this.uploadStatus = null
  // console.log("dieser.uploadStatus",diese.Datei, dieser.uploadStatus);

  dieser.Prozentsatz = 0
  versuchen {
  //Objektname kann als Dateiname (z. B. file.txt) oder Verzeichnis (z. B. abc/test/file.txt) angepasst werden, um die Datei in den aktuellen Bucket oder ein angegebenes Verzeichnis unter dem Bucket hochzuladen.
  let result = warte auf Client.multipartUpload(dieser.Dateiname, diese.Datei, {
   Überschriften: {
   'Inhaltsdisposition': 'inline',
   'Content-Type': this.file.type //Hinweis: Wird entsprechend dem Suffix des Bildes oder der Datei festgelegt. Ich habe in meinem Experiment '.png'-Bilder verwendet. Die spezifischen Gründe werden unten erläutert},
   Fortschritt: (p, Prüfpunkt) => {
   this.tempCheckpoint = Prüfpunkt;
   dieser.upload = Prüfpunkt.uploadId
   dieser.UploadName = Prüfpunkt.Name
   dieser.Prozentsatz = p * 100
   // console.log(p, Prüfpunkt, dieser.Prozentsatz, '---------UploadId-----------')
   // Haltepunkt-Aufzeichnungspunkt. Nach einem Neustart des Browsers ist es nicht möglich, direkt mit dem Hochladen fortzufahren. Sie müssen den Upload-Vorgang manuell anstoßen.
   },
   Meta: {Jahr: 2020, Personen: 'dev'},
   MIME: dieser.Dateityp
  });
  console.log(Ergebnis, dieser.Prozentsatz, 'Ergebnis=Slice-Upload abgeschlossen=');
  } fangen (e) {
  window.addEventListener('online', this.resumeUpload) // Dieser Listener wird in die Ausnahmebehandlung getrennter Netzwerke eingefügt. // Timeout-Ausnahme erfassen.
  if (e.code === 'ConnectionTimeoutError') { // Ausnahmebehandlung bei Anforderungstimeout this.uploadStatus = 'Ausnahme'
   console.log("Zeitüberschreitungsfehler");
   // führe den Vorgang „ConnectionTimeoutError“ aus
  }
  // console.log(e)
  }
 },
 // Hochladen fortsetzen.
 asynchroner Lebenslauf-Upload () {
  window.removeEventListener('online', this.resumeUpload)
  wenn (!this.tempCheckpoint) {
  this.$message.error('Bitte zuerst hochladen')
  zurückkehren
  }
  this.uploadStatus = null
  versuchen {
  let result = warte auf Client.multipartUpload(dieser.Dateiname, diese.Datei, {
   Überschriften: {
   'Inhaltsdisposition': 'inline',
   'Content-Type': this.file.type //Hinweis: Wird entsprechend dem Suffix des Bildes oder der Datei festgelegt. Ich habe in meinem Experiment '.png'-Bilder verwendet. Die spezifischen Gründe werden unten erläutert},

   Fortschritt: (p, Prüfpunkt) => {
   dieser.Prozentsatz = p * 100
   console.log(p, checkpoint, 'checkpoint----Hochgeladene Slice-Informationen wiederherstellen-------')
   this.tempCheckpoint = Prüfpunkt;
   },
   Prüfpunkt: dieser.tempCheckpoint,
   Meta: {Jahr: 2020, Personen: 'dev'},
   MIME: dieser.Dateityp
  })
  console.log(Ergebnis, 'Ergebnis-=-=-Upload fortsetzen abgeschlossen')
  } fangen (e) {
  Konsole.log(e, 'e-=-=-');
  }
 },

 // Zu ändernde Datei auswählen handleChange(file, fileList) {
  diese.Dateiliste = Dateiliste.Filter(Zeile => Zeile.uid == Datei.uid)
  diese.Datei = Datei.raw
  //Hochladen, wenn sich die Datei ändert // this.submitForm(file)
 },
 handleRemove(Datei, Dateiliste) {
  this.percentage = 0 // Setzt den Fortschrittsbalken auf Null this.fileList = []
 },
 }
}
</Skript>

<Stilbereich>
</Stil>

 const client = neues OSS({
 Region: „oss-cn-shanghai“, //Geben Sie den Wert basierend auf Ihrem Bucket-Standort ein. AccessKeyId: „LT******XY“, //AccessKeyId Ihres Kontos
 accessKeySecret: 'uu*********GiS', //accessKeySecret Ihres eigenen Kontos
 Bucket: 'a******io', //Bucket-Name});

Überschriften: {
   'Inhaltsdisposition': 'inline',
   'Content-Type': this.file.type //Hinweis: entsprechend dem Suffix des Bildes oder der Datei festlegen. Ich erhalte den Typ der Datei. Der genaue Grund wird unten erläutert},