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 สามารถสาธิตฟังก์ชันส่วนหน้าเท่านั้น

อัพโหลดไฟล์เดียว

อัพโหลดหลายไฟล์

อัพโหลดไฟล์ขนาดใหญ่

ดำเนินการอัปโหลดต่อจากเบรกพอยต์

การถ่ายโอนไฟล์ในไม่กี่วินาที

อัพโหลดรูปภาพ

การใช้งานส่วนหน้า

รายการส่วนประกอบ

• การอัปโหลดไฟล์เดียว (รวมถึงฟังก์ชันการกรองไฟล์): SingleFileUpload.vue
• การอัพโหลดหลายไฟล์: MultiFileUpload.vue
• อัพโหลดไฟล์ขนาดใหญ่: BigFileUpload.vue
• ดำเนินการอัปโหลดต่อจากเบรกพอยต์: StopUpload.vue
• ถ่ายโอนไฟล์ในไม่กี่วินาที: QuickUpload.vue
• การอัพโหลดรูปภาพ: PictureUpload.vue

แนะนำ 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:

• browser_button: เลือกรหัสของปุ่มไฟล์
• url: ที่อยู่การอัพโหลดไฟล์
• วิธีการ inputUploader: ใช้เพื่อรับวัตถุอัพโหลด

เพื่อให้ได้ออบเจ็กต์ uploader วิธีการ inputUploader จะถูกปรับแต่ง และวิธี inputUploader จำเป็นต้องถูกนำมาใช้ในส่วนประกอบที่อ้างอิงถึง Uploader.vue พารามิเตอร์ ซึ่งเป็นออบเจ็กต์ uploader จะถูกส่งผ่านไปยังวิธีการ inputUploader สำหรับรายละเอียดเกี่ยวกับออบเจ็กต์ผู้อัปโหลดและพารามิเตอร์การกำหนดค่าอื่นๆ โปรดดูเอกสารประกอบอย่างเป็นทางการของ plupload

คำนวณค่า MD5 ของไฟล์ (ใช้สำหรับถ่ายโอนไฟล์)

ใช้ js-spark-md5.js ที่อยู่โครงการ: https://github.com/satazor/js-spark-md5

ไฟล์-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 ไปยังเซิร์ฟเวอร์ก่อนเพื่อตรวจสอบว่าไฟล์นั้นได้รับการอัปโหลดหรือไม่ หากมีไฟล์อยู่ ก็จะคืนค่าเป็นเท็จและตั้งค่าไฟล์ สถานะที่จะอัปโหลด มิฉะนั้น ไฟล์จะถูกอัปโหลด

ตัวอย่างรูปภาพ

ใช้ FileReader เพื่ออ่านไฟล์และแปลงเป็นสตริงที่เข้ารหัส Base64 และกรอกแอตทริบิวต์ src ของแท็ก <image/> เพื่อดูฟังก์ชันแสดงตัวอย่างรูปภาพ

ไฟล์-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 ) ;
}