MyUploader

MonUploader

Téléchargement de fichiers uniques, téléchargement de fichiers multiples, téléchargement de fichiers volumineux, téléchargement de reprise de point d'arrêt, téléchargement de fichiers en quelques secondes, téléchargement d'images

Adresse du projet backend : https://github.com/gaoyuyue/MyUploader-Backend

Introduction

Le projet est développé à l'aide d'une méthode de séparation front-end et back-end et implémente plusieurs fonctions de téléchargement de fichiers couramment utilisées. Le front-end utilise vue.js + plupload + element-ui pour réaliser l'envoi de fichiers côté navigateur, et le back-end utilise spring boot + spring + spring mvc + mybatis pour réaliser la réception et le stockage des fichiers sur le côté serveur.

Ce projet est une implémentation frontale

rendus

Adresse de démonstration : https://gaoyuyue.github.io/MyUploader

ps : les pages statiques créées avec les pages git ne peuvent démontrer que les fonctions frontales.

Téléchargement d'un seul fichier

Téléchargement de plusieurs fichiers

Téléchargement de fichiers volumineux

Reprendre le téléchargement à partir du point d'arrêt

Transfert de fichiers en quelques secondes

Téléchargement d'images

Implémentation frontale

Liste des composants

• Téléchargement de fichier unique (y compris la fonction de filtrage de fichiers) : SingleFileUpload.vue
• Téléchargement multi-fichiers : MultiFileUpload.vue
• Téléchargement de fichiers volumineux : BigFileUpload.vue
• Reprendre le téléchargement à partir du point d'arrêt : StopUpload.vue
• Transfert de fichiers en quelques secondes : QuickUpload.vue
• Téléchargement d'images : PictureUpload.vue

Introduire plupload

version téléchargée : 2.3.6

Documentation officielle : https://www.plupload.com/docs/

Documentation chinoise : http://www.phpin.net/tools/plupload/

Pour faciliter l'utilisation, j'ai encapsulé plupload dans un composant vue Uploader.vue

exemple:

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

Paramètres à configurer pour utiliser le composant Uploader :

• Browse_button : Sélectionnez l'identifiant du bouton de fichier
• url : adresse de téléchargement du fichier
• Méthode inputUploader : utilisée pour obtenir l'objet uploader

Afin d'obtenir l'objet uploader, la méthode inputUploader est personnalisée et la méthode inputUploader doit être implémentée dans le composant qui fait référence à Uploader.vue. Un paramètre, l'objet uploader, est transmis à la méthode inputUploader. Pour plus de détails sur l'objet uploader et d'autres paramètres de configuration, veuillez vous référer à la documentation officielle de plupload.

Calculer la valeur MD5 du fichier (utilisé pour le transfert de fichiers)

Utilisation de js-spark-md5.js, adresse du projet : https://github.com/satazor/js-spark-md5

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

Transfert de fichier instantané : calculez la valeur MD5 du fichier après avoir ajouté le fichier. Avant de télécharger le fichier, envoyez d'abord la valeur MD5 au serveur pour vérifier si le fichier a été téléchargé. Si le fichier existe, il renvoie false et définit le fichier. statut à téléchargé. Sinon, le fichier est téléchargé.

Aperçu de l'image

Utilisez FileReader pour lire le fichier et le convertir en une chaîne codée en Base64, et remplissez l'attribut src de la balise <image/> pour réaliser la fonction d'aperçu de l'image.

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