MyUploader

MeinUploader

Hochladen einzelner Dateien, Hochladen mehrerer Dateien, Hochladen großer Dateien, Hochladen von Haltepunkt-Lebensläufen, Hochladen von Dateien in Sekunden, Hochladen von Bildern

Backend-Projektadresse: https://github.com/gaoyuyue/MyUploader-Backend

Einführung

Das Projekt wird unter Verwendung einer Front-End- und Back-End-Trennungsmethode entwickelt und implementiert mehrere häufig verwendete Funktionen zum Hochladen von Dateien. Das Front-End verwendet vue.js + plupload + element-ui, um das Senden von Dateien auf der Browserseite zu realisieren, und das Back-End verwendet Spring Boot + Spring + Spring MVC + Mybatis, um den Empfang und die Speicherung von Dateien auf der Browserseite zu realisieren serverseitig.

Bei diesem Projekt handelt es sich um eine Frontend-Implementierung

Darstellungen

Demo-Adresse: https://gaoyuyue.github.io/MyUploader

ps: Statische Seiten, die mit Git-Seiten erstellt wurden, können nur Front-End-Funktionen demonstrieren.

Einzelne Datei hochladen

Mehrere Dateien hochladen

Hochladen großer Dateien

Setzen Sie den Upload vom Haltepunkt fort

Dateiübertragung in Sekunden

Bild-Upload

Frontend-Implementierung

Komponentenliste

• Hochladen einzelner Dateien (einschließlich Dateifilterfunktion): SingleFileUpload.vue
• Hochladen mehrerer Dateien: MultiFileUpload.vue
• Hochladen großer Dateien: BigFileUpload.vue
• Fortsetzen des Uploads ab Haltepunkt: StopUpload.vue
• Dateiübertragung in Sekunden: QuickUpload.vue
• Bild-Upload: PictureUpload.vue

Plupload vorstellen

Plupload-Version: 2.3.6

Offizielle Dokumentation: https://www.plupload.com/docs/

Chinesische Dokumentation: http://www.phpin.net/tools/plupload/

Zur Vereinfachung der Verwendung habe ich plupload in eine Vue-Komponente Uploader.vue gekapselt

Beispiel:

< template >
    < div >
      < uploader
        browse_button = " browse_button "
        :url = " server_config.url+'/File/' "
        @inputUploader = " inputUploader "
      />
      < el-button id = " browse_button " type = " primary " >选择文件</ el-button >
      < span v-for = " file in files " >{{file.name}}</ span >
      < el-button type = " danger " @click = " up.start() " >开始上传</ el-button >
    </ div >
</ template >

< script >
  import Uploader from ' ./Uploader '
  export default {
    name : " FileUpload " ,
    data () {
      return {
        server_config : this . global . server_config ,
        files : [],
        up : {}
      }
    },
    methods : {
      inputUploader ( up ) {
        this . up = up;
        this . files = up . files ;
      }
    },
    components : {
      ' uploader ' : Uploader
    },
  }
</ script >

< style scoped>
</ style >

Parameter, die für die Verwendung der Uploader-Komponente konfiguriert werden müssen:

• browse_button: Wählen Sie die ID der Dateischaltfläche aus
• URL: Datei-Upload-Adresse
• inputUploader-Methode: Wird zum Abrufen des Uploader-Objekts verwendet

Um das Uploader-Objekt zu erhalten, wird die inputUploader-Methode angepasst und die inputUploader-Methode muss in der Komponente implementiert werden, die auf Uploader.vue verweist. Ein Parameter, das Uploader-Objekt, wird an die inputUploader-Methode übergeben. Einzelheiten zum Uploader-Objekt und anderen Konfigurationsparametern finden Sie in der offiziellen Dokumentation von plupload.

Berechnen Sie den MD5-Wert der Datei (wird für die Dateiübertragung verwendet).

Unter Verwendung von js-spark-md5.js, Projektadresse: https://github.com/satazor/js-spark-md5

file-md5.js

 'use strict' ;

import '../plugins/js-spark-md5.js'

export default function ( file , callback ) {
  var blobSlice = File . prototype . slice || File . prototype . mozSlice || File . prototype . webkitSlice ,
    file = file ,
    chunkSize = 2097152 ,                             // Read in chunks of 2MB
    chunks = Math . ceil ( file . size / chunkSize ) ,
    currentChunk = 0 ,
    spark = new SparkMD5 . ArrayBuffer ( ) ,
    fileReader = new FileReader ( ) ;

  fileReader . onload = function ( e ) {
    console . log ( 'read chunk nr' , currentChunk + 1 , 'of' , chunks ) ;
    spark . append ( e . target . result ) ;                   // Append array buffer
    currentChunk ++ ;

    if ( currentChunk < chunks ) {
      loadNext ( ) ;
    } else {
      callback ( null , spark . end ( ) ) ;
      console . log ( 'finished loading' ) ;
    }
  } ;

  fileReader . onerror = function ( ) {
    callback ( 'oops, something went wrong.' ) ;
  } ;

  function loadNext ( ) {
    var start = currentChunk * chunkSize ,
      end = ( ( start + chunkSize ) >= file . size ) ? file . size : start + chunkSize ;

    fileReader . readAsArrayBuffer ( blobSlice . call ( file , start , end ) ) ;
  }

  loadNext ( ) ;
} ;

Sofortige Dateiübertragung: Berechnen Sie den MD5-Wert der Datei, nachdem Sie die Datei hinzugefügt haben. Senden Sie vor dem Hochladen der Datei zunächst den MD5-Wert an den Server, um zu überprüfen, ob die Datei hochgeladen wurde. Wenn die Datei vorhanden ist, wird „false“ zurückgegeben und die Datei festgelegt Andernfalls wird die Datei hochgeladen.

Bildvorschau

Verwenden Sie FileReader, um die Datei zu lesen und in eine Base64-codierte Zeichenfolge zu konvertieren, und füllen Sie das src-Attribut des <image/> Tags aus, um die Bildvorschaufunktion zu realisieren.

Datei-URL.js

 export default function ( file , callback ) {
  if ( ! file || ! / image/ / . test ( file . type ) ) return ;
  let fileReader = new FileReader ( ) ;
  fileReader . onload = function ( ) {
    callback ( null , fileReader . result ) ;
  } ;
  fileReader . onerror = function ( ) {
    callback ( 'oops, something went wrong.' ) ;
  } ;
  fileReader . readAsDataURL ( file ) ;
}