MyUploader

MyUploader

تحميل ملف واحد، تحميل ملفات متعددة، تحميل ملف كبير، تحميل استئناف نقطة التوقف، تحميل الملف في ثوان، تحميل الصور

عنوان مشروع الواجهة الخلفية: https://github.com/gaoyuyue/MyUploader-Backend

مقدمة

تم تطوير المشروع باستخدام طريقة فصل الواجهة الأمامية والخلفية، وتنفيذ العديد من وظائف تحميل الملفات شائعة الاستخدام. تستخدم الواجهة الأمامية vue.js + plupload + element-ui لتحقيق إرسال الملفات على جانب المتصفح، وتستخدم الواجهة الخلفية Spring Boot + Spring + Spring mvc + mybatis لتحقيق استقبال الملفات وتخزينها على جانب الخادم.

هذا المشروع هو تنفيذ الواجهة الأمامية

الاداءات

العنوان التجريبي: https://gaoyuyue.github.io/MyUploader

ملاحظة: الصفحات الثابتة التي تم إنشاؤها باستخدام صفحات git يمكنها فقط إظهار وظائف الواجهة الأمامية.

تحميل ملف واحد

تحميل ملفات متعددة

تحميل ملف كبير

استئناف التحميل من نقطة التوقف

نقل الملفات في ثواني

تحميل الصورة

تنفيذ الواجهة الأمامية

قائمة المكونات

• تحميل ملف واحد (بما في ذلك وظيفة تصفية الملفات): SingleFileUpload.vue
• تحميل ملفات متعددة: MultiFileUpload.vue
• تحميل ملف كبير: BigFileUpload.vue
• استئناف التحميل من نقطة التوقف: StopUpload.vue
• نقل الملفات في ثوان: QuickUpload.vue
• تحميل الصورة: PictureUpload.vue

تقديم التحميل الزائد

نسخة التحميل: 2.3.6

الوثائق الرسمية: https://www.plupload.com/docs/

الوثائق الصينية: http://www.phpin.net/tools/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 >

المعلمات التي يجب تكوينها لاستخدام مكون برنامج التحميل:

• browser_button: حدد معرف زر الملف
• URL: عنوان تحميل الملف
• طريقة inputUploader: تستخدم للحصول على كائن برنامج التحميل

من أجل الحصول على كائن أداة التحميل، يتم تخصيص طريقة inputUploader، ويجب تنفيذ طريقة inputUploader في المكون الذي يشير إلى Uploader.vue. يتم تمرير المعلمة، كائن أداة التحميل، إلى طريقة inputUploader. للحصول على تفاصيل حول كائن أداة التحميل ومعلمات التكوين الأخرى، يرجى الرجوع إلى الوثائق الرسمية لـ pluload.

حساب قيمة الملف 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 ) ;
}