MyUploader
1.0.0
単一ファイルのアップロード、複数ファイルのアップロード、大きなファイルのアップロード、ブレークポイント再開アップロード、数秒でのファイルアップロード、画像アップロード
バックエンドプロジェクトのアドレス: https://github.com/gaoyuyue/MyUploader-Backend
このプロジェクトは、フロントエンドとバックエンドの分離方法を使用して開発され、一般的に使用されるいくつかのファイル アップロード機能を実装しています。 フロントエンドは vue.js + plupload + element-ui を使用してブラウザ側でのファイル送信を実現し、バックエンドは spring boot + spring + spring mvc + mybatis を使用してブラウザ側でのファイルの受信と保存を実現します。サーバー側。
このプロジェクトはフロントエンド実装です
デモのアドレス: https://gaoyuyue.github.io/MyUploader
ps: git ページで構築された静的ページは、フロントエンド機能のみをデモンストレーションできます。
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 >アップローダー オブジェクトを取得するには、inputUploader メソッドをカスタマイズし、uploader.vue を参照するコンポーネントに inputUploader メソッドを実装する必要があります。パラメーターであるアップローダー オブジェクトが inputUploader メソッドに渡されます。アップローダー オブジェクトおよびその他の設定パラメーターの詳細については、plupload 公式ドキュメントを参照してください。
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 ) ;
}
