MyUploader

MiCargador

Carga de un solo archivo, carga de múltiples archivos, carga de archivos grandes, carga de currículum de punto de interrupción, carga de archivos en segundos, carga de imágenes

Dirección del proyecto backend: https://github.com/gaoyuyue/MyUploader-Backend

Introducción

El proyecto se desarrolla utilizando un método de separación de front-end y back-end e implementa varias funciones de carga de archivos de uso común. El front-end usa vue.js + plupload + element-ui para realizar el envío de archivos en el lado del navegador, y el back-end usa spring boot + spring + spring mvc + mybatis para realizar la recepción y almacenamiento de archivos en el lado del servidor.

Este proyecto es una implementación front-end.

representaciones

Dirección de demostración: https://gaoyuyue.github.io/MyUploader

PD: las páginas estáticas creadas con páginas git solo pueden demostrar funciones de front-end.

Carga de un solo archivo

Carga de múltiples archivos

Carga de archivos grandes

Reanudar la carga desde el punto de interrupción

Transferencia de archivos en segundos

Subir imagen

Implementación frontal

Lista de componentes

• Carga de un solo archivo (incluida la función de filtrado de archivos): SingleFileUpload.vue
• Carga de varios archivos: MultiFileUpload.vue
• Carga de archivos grandes: BigFileUpload.vue
• Reanudar la carga desde el punto de interrupción: StopUpload.vue
• Transferencia de archivos en segundos: QuickUpload.vue
• Carga de imágenes: PictureUpload.vue

Introducir plupload

versión de carga: 2.3.6

Documentación oficial: https://www.plupload.com/docs/

Documentación china: http://www.phpin.net/tools/plupload/

Para facilitar su uso, encapsulé plupload en un componente vue Uploader.vue

ejemplo:

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

Parámetros que se deben configurar para utilizar el componente Uploader:

• browser_button: seleccione la identificación del botón de archivo
• url: dirección de carga del archivo
• Método inputUploader: utilizado para obtener el objeto de carga

Para obtener el objeto de carga, el método inputUploader se personaliza y el método inputUploader debe implementarse en el componente que hace referencia a Uploader.vue. Se pasa un parámetro, el objeto de carga, al método inputUploader. Para obtener detalles sobre el objeto de carga y otros parámetros de configuración, consulte la documentación oficial de plupload.

Calcular el valor MD5 del archivo (utilizado para la transferencia de archivos)

Usando js-spark-md5.js, dirección del proyecto: https://github.com/satazor/js-spark-md5

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

Transferencia instantánea de archivos: calcule el valor MD5 del archivo después de agregarlo. Antes de cargar el archivo, primero envíe el valor MD5 al servidor para verificar si el archivo se ha cargado. Si el archivo existe, devuelve falso y configura el archivo. estado cargado. De lo contrario, el archivo se carga.

Vista previa de la imagen

Utilice FileReader para leer el archivo y convertirlo en una cadena codificada en Base64, y complete el atributo src de la etiqueta <image/> para realizar la función de vista previa de la imagen.

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