MyUploader

MyUploader

單一檔案上傳，多檔案上傳，大檔案上傳，斷點續傳，檔案秒傳，圖片上傳

後端專案位址： https://github.com/gaoyuyue/MyUploader-Backend

簡介

專案採用前後端分離的方式進行開發，實作了幾種常用的文件上傳功能。 前端採用vue.js + plupload + element-ui 實現了檔案在瀏覽器端的發送, 後端採用spring boot + spring + spring mvc + mybatis 實現了檔案在伺服器端的接收和儲存。

本專案為前端實現

效果圖

示範網址： https://gaoyuyue.github.io/MyUploader

ps: 用git pages建構的靜態頁面，只能示範前端功能

單一檔案上傳

多文件上傳

大檔案上傳

斷點續傳

文件秒傳

圖片上傳

前端實現

組件列表

• 單一檔案上傳（包含檔案過濾功能）：SingleFileUpload.vue
• 多檔案上傳：MultiFileUpload.vue
• 大檔案上傳：BigFileUpload.vue
• 斷點續傳：StopUpload.vue
• 檔案秒傳：QuickUpload.vue
• 圖片上傳：PictureUpload.vue

引入plupload

plupload版本: 2.3.6

官方文件： https://www.plupload.com/docs/

中文文件： http://www.phpin.net/tools/plupload/

為了方便使用我將plupload封裝為成一個vue元件Uploader.vue

例子：

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

使用Uploader元件必須要設定的參數：

• browse_button： 選擇檔案button的id
• url： 文件上傳地址
• inputUploader方法： 用來取得uploader對象

為了取得uploader對象，自訂了inputUploader方法，需要在引用Uploader.vue的元件中實作inputUploader方法，inputUploader方法中傳入了一個參數即uploader物件。關於uploader物件及其他配置參數請參考plupload官方文檔

計算文件MD5值（用於文件妙傳）

採用js-spark-md5.js, 專案位址： 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 ( ) ;
} ;

檔案秒傳： 在新增檔案後計算檔案的MD5值，在檔案上傳前先傳送MD5值給伺服器查詢此檔案是否已上傳，若檔案存在回傳false將檔案狀態置為已上傳，否則上傳檔案。

圖片預覽

使用FileReader讀取檔案並轉成Base64編碼字串, 填入<image/>標籤的src屬性上，即可實現圖片預覽功能。

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