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 >

업로더 구성요소를 사용하도록 구성해야 하는 매개변수:

• browser_button: 파일 버튼의 ID를 선택하세요.
• url: 파일 업로드 주소
• inputUploader 메소드: 업로더 객체를 얻는 데 사용됩니다.

업로더 객체를 얻으려면 inputUploader 메서드를 사용자 정의해야 하며, Uploader.vue를 참조하는 구성 요소에 inputUploader 메서드를 구현해야 합니다. 매개변수인 업로더 개체가 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 값을 서버에 전송하여 파일이 존재하는지 확인합니다. 파일이 있으면 false를 반환하고 파일을 설정합니다. 그렇지 않으면 파일이 업로드됩니다.

사진 미리보기

FileReader를 사용하여 파일을 읽고 Base64로 인코딩된 문자열로 변환하고 <image/> 태그의 src 속성을 채워 이미지 미리보기 기능을 구현합니다.

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