Implementierung des Hochladens großer Dateien und des durch Haltepunkte fortsetzbaren Hochladens in Vue

<Vorlage>
  <div id="app">
    <!-- Komponente hochladen -->
    <el-upload Aktion ziehen :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i Klasse="el-icon-upload"></i>
      <div class="el-upload__text">Ziehen Sie Dateien hierher oder <em>klicken Sie zum Hochladen</em></div>
      <div class="el-upload__tip" slot="tip">Die Videogröße überschreitet nicht 200 MB</div>
    </el-upload>

    <!-- Fortschrittsanzeige-->
    <div Klasse="Fortschrittsbox">
      <span>Upload-Fortschritt: {{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ hochladen | btnTextFilter}}</el-button>
    </div>

    <!-- Das erfolgreich hochgeladene Video anzeigen-->
    <div v-if="videoUrl">
      <video :src="videoUrl" steuert />
    </div>
  </div>
</Vorlage>

async handleChange(Datei) {
  const fileObj = datei.raw
  versuchen{
    const buffer = warte auf dies.fileToBuffer(fileObj)
    console.log(Puffer)
  }fangen(e){
    console.log(e)
  }
}

//Konvertiere das File-Objekt in einen ArrayBuffer 
fileToBuffer(Datei) {
  returniere neues Promise((lösen, ablehnen) => {
    const fr = neuer FileReader()
    fr.onload = e => {
      lösen(e.Ziel.Ergebnis)
    }
    fr.readAsArrayBuffer(Datei)
    fr.onerror = () => {
      reject(new Error('Fehler beim Konvertieren des Dateiformats'))
    }
  })
}

// Datei in feste Größe (2M) aufteilen. Beachten Sie, dass hier mehrere Konstanten deklariert sind const chunkSize = 2097152,
  chunkList = [], // Array zur Aufnahme aller Slices chunkListLength = Math.ceil(fileObj.size / chunkSize), // Gesamtzahl der Slices berechnen suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // Dateisuffix // Hash-Wert basierend auf dem Dateiinhalt generieren const spark = new SparkMD5.ArrayBuffer()
spark.append(Puffer)
const hash = spark.end()

// Slices generieren. Das Backend erfordert, dass die übergebenen Parameter Byte-Datenblöcke (Chunk) und der Dateiname jedes Datenblocks (FileName) sind.
let curChunk = 0 // Anfangsposition beim Slicen for (let i = 0; i < chunkListLength; i++) {
  konstantes Element = {
    Chunk: DateiObj.slice(aktuellerChunk, aktuellerChunk + Chunkgröße),
    fileName: `${hash}_${i}.${suffix}` // Der Dateiname wird entsprechend hash_1.jpg benannt}
  curChunk += ChunkGröße
  chunkList.push(Element)
}
Konsole.log(ChunkList)

sendRequest() {
  const requestList = [] // Sammlung anfordern this.chunkList.forEach(item => {
    const fn = () => {
      const formData = new FormData()
      formData.append('chunk', item.chunk)
      formData.append('Dateiname', item.Dateiname)
      returniere Axios({
        URL: „/single3“,
        Methode: 'post',
        Header: { 'Inhaltstyp': 'multipart/form-data' },
        Daten: formData
      }).dann(res => {
        if (res.data.code === 0) { // Erfolgreichif (this.percentCount === 0) {
            this.percentCount = 100 / this.chunkList.length
          }
          this.percent += this.percentCount // Fortschritt ändern}
      })
    }
    requestList.push(fn)
  })
  
  let i = 0 // Anzahl der gesendeten Anfragen aufzeichnen const send = async () => {
    // wenn ('Pause') zurück
    if (i >= Anfrageliste.Länge) {
      //Ausgefüllte Retoure senden
    } 
    warte auf requestList[i]()
    ich++
    schicken()
  }
  send() // Anfrage senden},

axios.post('/single3', formData, {
  Header: { 'Inhaltstyp': 'multipart/form-data' }
})

const vollständig = () => {
  axios({
    URL: „/zusammenführen“,
    Methode: 'get',
    Parameter: { Hash: this.hash }
  }).dann(res => {
    if (res.data.code === 0) { // Anfrage erfolgreich gesendet this.videoUrl = res.data.path
    }
  })
}

Filter:
  btnTextFilter(Wert) {
    Rückgabewert? 'Pause': 'Weiter'
  }
}

handleClickBtn() {
  dies.upload = !dies.upload
  // Wenn nicht pausiert, Hochladen fortsetzen if (this.upload) this.sendRequest()
}

<Vorlage>
  <div id="app">
    <!-- Komponente hochladen -->
    <el-upload Aktion ziehen :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i Klasse="el-icon-upload"></i>
      <div class="el-upload__text">Ziehen Sie Dateien hierher oder <em>klicken Sie zum Hochladen</em></div>
      <div class="el-upload__tip" slot="tip">Die Videogröße überschreitet nicht 200 MB</div>
    </el-upload>

    <!-- Fortschrittsanzeige-->
    <div Klasse="Fortschrittsbox">
      <span>Upload-Fortschritt: {{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ hochladen | btnTextFilter}}</el-button>
    </div>

    <!-- Das erfolgreich hochgeladene Video anzeigen-->
    <div v-if="videoUrl">
      <video :src="videoUrl" steuert />
    </div>
  </div>
</Vorlage>

<Skript>
  SparkMD5 von „spark-md5“ importieren
  Axios von „Axios“ importieren
  
  Standard exportieren {
    Name: 'App3',
    Filter:
      btnTextFilter(Wert) {
        Rückgabewert? 'Pause': 'Weiter'
      }
    },
    Daten() {
      zurückkehren {
        Prozent: 0,
        Video-URL: '',
        hochladen: wahr,
        ProzentAnzahl: 0
      }
    },
    Methoden: {
      async handleChange(Datei) {
        wenn (!Datei) zurückgeben
        dies.Prozent = 0
        diese.videoUrl = ''
        // Datei abrufen und in ein ArrayBuffer-Objekt konvertieren const fileObj = file.raw
        Puffer lassen
        versuchen {
          Puffer = warte auf dies.fileToBuffer(fileObj)
        } fangen (e) {
          console.log(e)
        }
        
        // Datei in feste Größe (2M) aufteilen. Beachten Sie, dass hier mehrere Konstanten deklariert sind const chunkSize = 2097152,
          chunkList = [], // Array zur Aufnahme aller Slices chunkListLength = Math.ceil(fileObj.size / chunkSize), // Gesamtzahl der Slices berechnen suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // Dateisuffix // Hash-Wert basierend auf dem Dateiinhalt generieren const spark = new SparkMD5.ArrayBuffer()
        spark.append(Puffer)
        const hash = spark.end()

        // Slices generieren. Das Backend erfordert, dass die übergebenen Parameter Byte-Datenblöcke (Chunk) und der Dateiname jedes Datenblocks (FileName) sind.
        let curChunk = 0 // Anfangsposition beim Slicen for (let i = 0; i < chunkListLength; i++) {
          konstantes Element = {
            Chunk: DateiObj.slice(aktuellerChunk, aktuellerChunk + Chunkgröße),
            fileName: `${hash}_${i}.${suffix}` // Der Dateiname wird entsprechend hash_1.jpg benannt}
          curChunk += ChunkGröße
          chunkList.push(Element)
        }
        this.chunkList = chunkList // sendRequest muss this.hash = hash verwenden // sendRequest muss this.sendRequest() verwenden
      },
      
      // Anfrage senden sendRequest() {
        const requestList = [] // Sammlung anfordern this.chunkList.forEach((item, index) => {
          const fn = () => {
            const formData = new FormData()
            formData.append('chunk', item.chunk)
            formData.append('Dateiname', item.Dateiname)
            returniere Axios({
              URL: „/single3“,
              Methode: 'post',
              Header: { 'Inhaltstyp': 'multipart/form-data' },
              Daten: formData
            }).dann(res => {
              if (res.data.code === 0) { // Erfolgreichif (this.percentCount === 0) { // Vermeiden Sie das Löschen des Slices nach erfolgreichem Upload und das Ändern der Länge von chunkList, um den Wert von percentCount zu beeinflussenthis.percentCount = 100 / this.chunkList.length
                }
                this.percent += this.percentCount // Fortschritt ändern this.chunkList.splice(index, 1) // Sobald der Upload erfolgreich war, diesen Block löschen, um die Wiederaufnahme des Haltepunkts zu ermöglichen}
            })
          }
          requestList.push(fn)
        })
        
        let i = 0 // Zeichne die Anzahl der gesendeten Anfragen auf // Nachdem alle Dateisegmente gesendet wurden, musst du die Schnittstelle „/merge“ anfordern und den Datei-Hash an den Server übergeben const complete = () => {
          axios({
            URL: „/zusammenführen“,
            Methode: 'get',
            Parameter: { Hash: this.hash }
          }).dann(res => {
            if (res.data.code === 0) { // Anfrage erfolgreich gesendet this.videoUrl = res.data.path
            }
          })
        }
        const send = async () => {
          wenn (!this.upload) return
          if (i >= Anfrageliste.Länge) {
            // Senden abgeschlossen()
            zurückkehren
          } 
          warte auf requestList[i]()
          ich++
          schicken()
        }
        send() // Anfrage senden},
      
      // Drücken Sie die Pause-Taste handleClickBtn() {
        dies.upload = !dieses.upload
        // Wenn nicht pausiert, Hochladen fortsetzen if (this.upload) this.sendRequest()
      },
      
      //Konvertiere das File-Objekt in einen ArrayBuffer 
      fileToBuffer(Datei) {
        returniere neues Promise((lösen, ablehnen) => {
          const fr = neuer FileReader()
          fr.onload = e => {
            lösen(e.Ziel.Ergebnis)
          }
          fr.readAsArrayBuffer(Datei)
          fr.onerror = () => {
            reject(new Error('Fehler beim Konvertieren des Dateiformats'))
          }
        })
      }
    }
  }
</Skript>

<Stilbereich>
  .Fortschrittsbox {
    Box-Größe: Rahmenbox;
    Breite: 360px;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
    Rand oben: 10px;
    Polsterung: 8px 10px;
    Hintergrundfarbe: #ecf5ff;
    Schriftgröße: 14px;
    Rahmenradius: 4px;
  }
</Stil>