vue-simple-uploader 常見問題整理


前言

感謝大家的支持,我整理了一些 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、合並中等)

插件原本只支持了successerroruploadingpausedwaiting這幾種狀態,並且作者沒有提供擴展api。

如果想要加一些自定義的狀態,比如「校驗MD5」、「合並中」、「轉碼中」、「上傳失敗」等,需要自己用一些額外的小手段,比如我的做法就是使用障眼法,自己寫一個標簽蓋在原本的狀態上,並且手動控制該狀態的顯示和移除。

關於秒傳和分片檢驗的邏輯

在配置了 testChunkstrue 后, 每次上傳的最開始,插件都會先發一個 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM