MyUploader

Pengunggah Saya

Unggah file tunggal, unggahan banyak file, unggahan file besar, unggahan resume breakpoint, unggahan file dalam hitungan detik, unggahan gambar

Alamat proyek backend: https://github.com/gaoyuyue/MyUploader-Backend

Perkenalan

Proyek ini dikembangkan menggunakan metode pemisahan front-end dan back-end, dan mengimplementasikan beberapa fungsi pengunggahan file yang umum digunakan. Front-end menggunakan vue.js + plupload + element-ui untuk mewujudkan pengiriman file di sisi browser, dan back-end menggunakan spring boot + spring + spring mvc + mybatis untuk mewujudkan penerimaan dan penyimpanan file di sisi sisi server.

Proyek ini adalah implementasi front-end

rendering

Alamat demo: https://gaoyuyue.github.io/MyUploader

ps: Halaman statis yang dibuat dengan halaman git hanya dapat mendemonstrasikan fungsi front-end.

Unggah file tunggal

Unggahan beberapa file

Unggah file besar

Lanjutkan pengunggahan dari breakpoint

Transfer file dalam hitungan detik

Unggah gambar

Implementasi ujung depan

Daftar komponen

• Unggah file tunggal (termasuk fungsi pemfilteran file): SingleFileUpload.vue
• Unggahan multi-file: MultiFileUpload.vue
• Unggah file besar: BigFileUpload.vue
• Lanjutkan pengunggahan dari breakpoint: StopUpload.vue
• Transfer file dalam hitungan detik: QuickUpload.vue
• Unggah gambar: PictureUpload.vue

Perkenalkan plupload

tolong unggah versi: 2.3.6

Dokumentasi resmi: https://www.plupload.com/docs/

Dokumentasi berbahasa Mandarin: http://www.phpin.net/tools/plupload/

Untuk kemudahan penggunaan, saya merangkum plupload ke dalam komponen vue Uploader.vue

contoh:

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

Parameter yang harus dikonfigurasi untuk menggunakan komponen Uploader:

• telusuri_button: Pilih id tombol file
• url: Alamat pengunggahan file
• metode inputUploader: digunakan untuk mendapatkan objek pengunggah

Untuk mendapatkan objek uploader, metode inputUploader disesuaikan, dan metode inputUploader perlu diimplementasikan dalam komponen yang mereferensikan Uploader.vue. Parameter, objek uploader, diteruskan ke metode inputUploader. Untuk detail tentang objek pengunggah dan parameter konfigurasi lainnya, silakan merujuk ke dokumentasi resmi plupload.

Hitung nilai file MD5 (digunakan untuk transfer file)

Menggunakan js-spark-md5.js, alamat proyek: 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 ( ) ;
} ;

Transfer file instan: Hitung nilai MD5 file setelah menambahkan file. Sebelum mengunggah file, kirim dulu nilai MD5 ke server untuk memeriksa apakah file telah diunggah status untuk diunggah. Jika tidak, file akan diunggah.

Pratinjau gambar

Gunakan FileReader untuk membaca file dan mengubahnya menjadi string berkode Base64, dan isi atribut src dari tag <image/> untuk mewujudkan fungsi pratinjau gambar.

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