前言
百度上有很多vue-simple-uploader的使用說(shuō)明，我就不說(shuō)了际看。我只說(shuō)下我所需要的功能刷晋。
一盖高、先說(shuō)下項(xiàng)目需求
（1）前端頁(yè)面要批量上傳數(shù)據(jù)
（2）數(shù)據(jù)大小不定，M眼虱、G喻奥、T，這是上傳數(shù)據(jù)的大小范圍
（3）重點(diǎn)來(lái)了捏悬，后端要求在上傳之前撞蚕，為每一條數(shù)據(jù)上傳的時(shí)候攜帶一些需要的參數(shù)。例如：文件名过牙、路徑甥厦、session_id、文件權(quán)限等抒和。
（4）暫時(shí)沒(méi)有斷點(diǎn)續(xù)傳矫渔、切片等其他功能
二、遇到的問(wèn)題
通過(guò)閱讀simple-uploader文檔摧莽、百度庙洼、Google等搜到的都是vue-simple-uploader的事件、方法镊辕、配置等使用方法油够。直接把所有的事件進(jìn)行實(shí)現(xiàn)打印查看。并不能實(shí)現(xiàn)后端的要求征懈。
三石咬、解決過(guò)程
（1）公司大佬帶著開(kāi)始讀simple-uploader的源碼，重寫(xiě)方法都試了卖哎，還是不行鬼悠。
（2）再次仔細(xì)的閱讀了simple-uploader文檔，發(fā)現(xiàn)配置項(xiàng)中一個(gè)字段query,它的描述是query 其他額外的參數(shù)亏娜，這個(gè)可以是一個(gè)對(duì)象或者是一個(gè)函數(shù)焕窝，如果是函數(shù)的話，則會(huì)傳入 Uploader.File 實(shí)例维贺、當(dāng)前塊 Uploader.Chunk 以及是否是測(cè)試模式它掂，默認(rèn)為 {}。溯泣。這感覺(jué)很容易忽略過(guò)去虐秋。榕茧。。
（3）query可以是一個(gè)對(duì)象客给，然后就在里面寫(xiě)上自己需要的字段用押，重新上傳文件，在每個(gè)put中發(fā)現(xiàn)都有query添加的字段起愈。但是不能根據(jù)文件的不同來(lái)改變字段的值只恨。
（4）query描述中也說(shuō)到可以是一個(gè)函數(shù)，然后就寫(xiě)成函數(shù)抬虽，然后進(jìn)行測(cè)試官觅，發(fā)現(xiàn)可以改變字段的值。選擇文件之后阐污，函數(shù)的第一個(gè)參數(shù)就是當(dāng)前文件的信息休涤，進(jìn)行上傳文件之后，put中笛辟，每個(gè)消息都是當(dāng)前文件的字段功氨。完成后端要求。
下面就是我的options配置：
options:{
target: '/filesystem/api/rest/v1/main_file/put',
testChunks: false,
fileParameterName: "put_main_file",
query: function(file, res, status) {
return {
"session_id": window.main.$store.state.userInfo.session_id,
"file_type": window.main.$store.state.filesManage.file_type,
"file_name": file.name,
"file_path": "/" +file.relativePath.substr(0, file.relativePath.lastIndexOf("/")),
}
}
（5）put每個(gè)文件給后端的字段手幢，字段根據(jù)自己需求可變
