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

https://github.com/23/resumable.js/tree/master/samples

https://blog.csdn.net/oppo5630/article/details/80880224

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/435404.html

標籤：其他

上一篇：react 也就這么回事 04 —— 元素渲染

下一篇：CSS垂直居中方法

vue-simple-uploader 常見問題整理