MyUploader

MyUploader

Single file upload, multiple file upload, large file upload, breakpoint resume upload, file upload in seconds, image upload

Backend project address: https://github.com/gaoyuyue/MyUploader-Backend

Introduction

The project is developed using a front-end and back-end separation method, and implements several commonly used file upload functions. The front-end uses vue.js + plupload + element-ui to realize the sending of files on the browser side, and the back-end uses spring boot + spring + spring mvc + mybatis to realize the reception and storage of files on the server side.

This project is a front-end implementation

renderings

Demo address: https://gaoyuyue.github.io/MyUploader

ps: Static pages built with git pages can only demonstrate front-end functions.

Single file upload

Multiple file upload

Large file upload

Resume upload from breakpoint

File transfer in seconds

Image upload

Front-end implementation

Component list

• Single file upload (including file filtering function): SingleFileUpload.vue
• Multi-file upload: MultiFileUpload.vue
• Large file upload: BigFileUpload.vue
• Resume upload from breakpoint: StopUpload.vue
• File transfer in seconds: QuickUpload.vue
• Picture upload: PictureUpload.vue

Introduce plupload

plupload version: 2.3.6

Official documentation: https://www.plupload.com/docs/

Chinese documentation: http://www.phpin.net/tools/plupload/

For ease of use, I encapsulated plupload into a vue component Uploader.vue

example:

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

Parameters that must be configured to use the Uploader component:

• browse_button: Select the id of the file button
• url: File upload address
• inputUploader method: used to obtain the uploader object

In order to obtain the uploader object, the inputUploader method is customized, and the inputUploader method needs to be implemented in the component that references Uploader.vue. A parameter, the uploader object, is passed in to the inputUploader method. For details about the uploader object and other configuration parameters, please refer to the plupload official documentation.

Calculate file MD5 value (used for file transfer)

Using js-spark-md5.js, project address: 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 ( ) ;
} ;

Instant file transfer: Calculate the MD5 value of the file after adding the file. Before uploading the file, first send the MD5 value to the server to check whether the file has been uploaded. If the file exists, it returns false and sets the file status to uploaded. Otherwise, the file is uploaded.

Picture preview

Use FileReader to read the file and convert it into a Base64 encoded string, and fill in the src attribute of the <image/> tag to realize the image preview function.

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