MyUploader

MeuUploader

Upload de arquivo único, upload de vários arquivos, upload de arquivo grande, upload de currículo de ponto de interrupção, upload de arquivo em segundos, upload de imagem

Endereço do projeto de back-end: https://github.com/gaoyuyue/MyUploader-Backend

Introdução

O projeto é desenvolvido usando um método de separação front-end e back-end e implementa várias funções de upload de arquivos comumente usadas. O front-end usa vue.js + plupload + element-ui para realizar o envio de arquivos no lado do navegador, e o back-end usa spring boot + spring + spring mvc + mybatis para realizar a recepção e armazenamento de arquivos no lado do servidor.

Este projeto é uma implementação front-end

renderizações

Endereço de demonstração: https://gaoyuyue.github.io/MyUploader

ps: páginas estáticas construídas com páginas git só podem demonstrar funções de front-end.

Upload de arquivo único

Upload de vários arquivos

Upload de arquivo grande

Retomar upload do ponto de interrupção

Transferência de arquivos em segundos

Carregamento de imagem

Implementação de front-end

Lista de componentes

• Upload de arquivo único (incluindo função de filtragem de arquivo): SingleFileUpload.vue
• Upload de vários arquivos: MultiFileUpload.vue
• Upload de arquivo grande: BigFileUpload.vue
• Retomar upload do ponto de interrupção: StopUpload.vue
• Transferência de arquivos em segundos: QuickUpload.vue
• Upload de imagem: PictureUpload.vue

Apresente o plupload

versão do plupload: 2.3.6

Documentação oficial: https://www.plupload.com/docs/

Documentação chinesa: http://www.phpin.net/tools/plupload/

Para facilitar o uso, encapsulei o plupload em um componente vue Uploader.vue

exemplo:

< 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 devem ser configurados para utilizar o componente Uploader:

• Browse_button: Selecione o id do botão de arquivo
• url: endereço de upload do arquivo
• Método inputUploader: usado para obter o objeto uploader

Para obter o objeto uploader, o método inputUploader é customizado e o método inputUploader precisa ser implementado no componente que faz referência a Uploader.vue. Um parâmetro, o objeto uploader, é passado para o método inputUploader. Para obter detalhes sobre o objeto uploader e outros parâmetros de configuração, consulte a documentação oficial do plupload.

Calcular o valor MD5 do arquivo (usado para transferência de arquivos)

Usando js-spark-md5.js, endereço do projeto: https://github.com/satazor/js-spark-md5

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

Transferência instantânea de arquivo: calcule o valor MD5 do arquivo após adicioná-lo. Antes de enviar o arquivo, primeiro envie o valor MD5 ao servidor para verificar se o arquivo foi carregado. Se o arquivo existir, ele retornará falso e definirá o arquivo. status para carregado. Caso contrário, o arquivo será carregado.

Visualização da imagem

Use FileReader para ler o arquivo e convertê-lo em uma string codificada em Base64 e preencha o atributo src da tag <image/> para realizar a função de visualização da imagem.

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