vue-simple-uploader 常見問題整理
- option或者query怎麼做成動態的?
- target怎麼做成動態的?
- 如何限制上傳檔案的個數或忽略某些檔案?
- 如何自定義介面的請求引數?
- 動態修改
attrs
不成功的問題 - 關於一些自定義狀態的展示(校驗MD5、合併中等)
- 關於秒傳和分片檢驗的邏輯
- 第一個分片會請求兩次的問題
- 開啟了testChunk後伺服器收不到第一個分片
- 最後一個分片大小大於
chunkSize
,但不會被自動分隔,如何處理? - 計算MD5的時候,最好隱藏“播放/暫停”按鈕
- 能不能給下後端程式碼?
前言
感謝大家的支援,我整理了一些 vue-simple-uploader
常見的問題和處理思路。大家遇到了問題或者對曾經的問題有了解決方案,都可以提出來,共享成果
關於vue-simple-uploader
的應用可以看我另一篇文章:https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html
github地址:https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader
option或者query怎麼做成動態的?
query
可以是函式。
query: (file, chunk) => { return { // 可以針對於每個file物件設定自定義的params ...file.params, id: file.id, culture: this.$i18n.locale, } },
target怎麼做成動態的?
target
可以是函式
如何限制上傳檔案的個數或忽略某些檔案?
在fileAdded或者filesAdded裡面做判斷,設定 ignore
屬性為 ture
來過濾掉該檔案
file-added(file)
, 添加了一個檔案事件,一般用做檔案校驗,如果設定file.ignored = true
的話這個檔案就會被過濾掉。
files-added(files, fileList)
, 添加了一批檔案事件,一般用做一次選擇的多個檔案進行校驗,如果設定files.ignored = true
或者fileList.ignored = true
的話本次選擇的檔案就會被過濾掉。
如何自定義介面的請求引數?
比如專案中有自己風格的介面鍵名定義,比如
chunkNumber,想改成chunk-number;或者想自己魔改請求中的引數,可以使用 processParams
配置
processParams
:處理請求引數,預設function (params) {return params}
,一般用於修改引數名字或者刪除引數。0.5.2版本後,processParams
會有更多引數:(params, Uploader.File, Uploader.Chunk, isTest)。
動態修改 attrs
不成功的問題
因為作者只在 <uploader-btn>
元件中的 mounted
中綁了一次attrs
,也就意味著 attrs
不是動態的了。
可以找到原生的input後設置accept
const $input = $('#global-uploader-btn').find('input')
const accept = opts.accept
$input.attr('accept', accept.join())
關於一些自定義狀態的展示(校驗MD5、合併中等)
外掛原本只支援了success
、error
、uploading
、paused
、waiting
這幾種狀態,並且作者沒有提供擴充套件api。
如果想要加一些自定義的狀態,比如「校驗MD5」、「合併中」、「轉碼中」、「上傳失敗」等,需要自己用一些額外的小手段,比如我的做法就是使用障眼法,自己寫一個標籤蓋在原本的狀態上,並且手動控制該狀態的顯示和移除。
關於秒傳和分片檢驗的邏輯
在配置了 testChunks
為 true
後, 每次上傳的最開始,外掛都會先發一個 get
請求,來測試哪些分片在服務端已經上傳過了;分片校驗就是在這一步做的,外掛有一個配置項是 checkChunkUploadedByResponse
函式,就是做秒傳和斷點續傳的。每一個分片都會呼叫一次該函式,然後前端去根據後端返回的引數做判斷,若該分片上傳過了,返回 true
即可。
比如說後端可以這樣做,如果一個檔案已經上傳過了,直接返回一個“跳過上傳”的引數(比如skipUpload
)。否則後端返回“已上傳”的引數,比如 uploaded: [1, 10, 11, 12, 13]。
checkChunkUploadedByResponse (chunk, message) {
var objMessage = JSON.parse(message);
// 秒傳
if (objMessage.skipUpload) {
return true;
}
// 斷點續傳,判斷當前的chunk是否上傳過
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},
第一個分片會請求兩次的問題
可能是因為你的 testChunks
設為了 false
,但是沒刪掉
checkChunkUploadedByResponse
這個函式
開啟了testChunk後伺服器收不到第一個分片
testChunk的get請求,預設帶了第一個分片給服務端,如果服務端返回的是 200
狀態,則假定當前塊已經上傳過了,不會再上傳了;
如果遇到這個問題,需要服務端改成其他http狀態碼,比如204
,這樣就不在“ 200, 201, 202
”這個集合裡了,代表服務端還沒有這個塊,需要按照標準模式上傳,這樣第一個分片就會再次被上傳了。
最後一個分片大小大於chunkSize
,但不會被自動分隔,如何處理?
設定 forceChunkSize
選項
forceChunkSize
:是否強制所有的塊都是小於等於chunkSize
的值。預設是false
。
計算MD5的時候,最好隱藏“播放/暫停”按鈕
因為此時md5值還未計算完,如果點選播放或暫停,則會得到外掛本身的md5值
能不能給下後端程式碼?
後端不是小弟寫的,只能給幾個文章作為參考吧
https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader