參考https://www.helloweba.net/javascript/632.html
介紹vue-simple-uploader
就是一個基於 simple-uploader.js 和Vue結合做的一個上傳組件，自帶 UI，可覆蓋、自定義。它支持文件、多文件、文件夾上傳；支持拖拽文件、文件夾上傳；可暫停、繼續上傳；支持秒傳；上傳隊列管理，支持最大並發上傳；分片上傳；支持進度、預估剩余時間、出錯自動重試、重傳等操作
可以使用npm安裝
npm install vue-simple-uploader --save
// 或者
cnpm install vue-simple-uploader --save // 淘寶鏡像安裝比較快
使用
首先初始化，在main.js中引入該組件,代碼如下:
import Vue from 'vue'
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
在頁面上的使用代碼如下:
<template>
<uploader :options="options" class="uploader-example">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :attrs="attrs">select images</uploader-btn>
<uploader-btn :directory="true">select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</template>
<script>
export default {
data () {
return {
options: {
target: 'http://localhost:9000/upload',
testChunks: false,
chunkSize: 1024*1024*2, //1MB
simultaneousUploads: 3, //並發上傳數
headers: {
'access-token': 'abcd1234'
},
},
attrs: {
accept: 'image/*'
}
}
}
}
</script>
<style>
.uploader-example {
width: 880px;
padding: 15px;
margin: 40px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
</style>
Props
- options {Object}
該組件基於simple-uploader.js封裝的vue組件，大多數配置選項可以參照simple-uploader.js。這里將主要常用的配置選項列出來
gitup文檔地址https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md
target 目標上傳 URL，可以是字符串也可以是函數，如果是函數的話，則會傳入 Uploader.File 實例、當前塊 Uploader.Chunk 以及是否是測試模式，默認值為 '/'。
singleFile 單文件上傳。覆蓋式，如果選擇了多個會把之前的取消掉。默認 false。
chunkSize 分塊時按照該值來分。最后一個上傳塊的大小是可能是大於等於1倍的這個值但是小於兩倍的這個值大小，可見這個 Issue #51，默認 110241024。
forceChunkSize 是否強制所有的塊都是小於等於 chunkSize 的值。默認是 false。
simultaneousUploads 並發上傳數，默認 3。
fileParameterName 上傳文件時文件的參數名，默認 file。
query 其他額外的參數，這個可以是一個對象或者是一個函數，如果是函數的話，則會傳入 Uploader.File 實例、當前塊 Uploader.Chunk 以及是否是測試模式，默認為 {}。
headers 額外的一些請求頭，如果是函數的話，則會傳入 Uploader.File 實例、當前塊 Uploader.Chunk 以及是否是測試模式，默認 {}。
withCredentials 標准的 CORS 請求是不會帶上 cookie 的，如果想要帶的話需要設置 withCredentials 為 true，默認 false。
method 當上傳的時候所使用的是方式，可選 multipart、octet，默認 multipart，參考 multipart vs octet。
testMethod 測試的時候使用的 HTTP 方法，可以是字符串或者函數，如果是函數的話，則會傳入 Uploader.File 實例、當前塊 Uploader.Chunk，默認 GET。
uploadMethod 真正上傳的時候使用的 HTTP 方法，可以是字符串或者函數，如果是函數的話，則會傳入 Uploader.File 實例、當前塊 Uploader.Chunk，默認 POST。
allowDuplicateUploads 如果說一個文件以及上傳過了是否還允許再次上傳。默認的話如果已經上傳了，除非你移除了否則是不會再次重新上傳的，所以也就是默認值為 false。
prioritizeFirstAndLastChunk 對於文件而言是否高優先級發送第一個和最后一個塊。一般用來發送到服務端，然后判斷是否是合法文件；例如圖片或者視頻的 meta 數據一般放在文件第一部分，這樣可以根據第一個塊就能知道是否支持；默認 false。
testChunks 是否測試每個塊是否在服務端已經上傳了，主要用來實現秒傳、跨瀏覽器上傳等，默認 true。
preprocess 可選的函數，每個塊在測試以及上傳前會被調用，參數就是當前上傳塊實例 Uploader.Chunk，注意在這個函數中你需要調用當前上傳塊實例的 preprocessFinished 方法，默認 null。
initFileFn 可選函數用於初始化文件對象，傳入的參數就是 Uploader.File 實例。
readFileFn 可選的函數用於原始文件的讀取操作，傳入的參數就是 Uploader.File 實例、文件類型、開始字節位置 startByte，結束字節位置 endByte、以及當前塊 Uploader.Chunk 實例。並且當完成后應該調用當前塊實例的readFinished 方法，且帶參數-已讀取的 bytes。
checkChunkUploadedByResponse 可選的函數用於根據 XHR 響應內容檢測每個塊是否上傳成功了，傳入的參數是：Uploader.Chunk 實例以及請求響應信息。這樣就沒必要上傳（測試）所有的塊了，具體細節原因參考 Issue #1，使用示例.
generateUniqueIdentifier 可覆蓋默認的生成文件唯一標示的函數，默認 null。
maxChunkRetries 最大自動失敗重試上傳次數，值可以是任意正整數，如果是 undefined 則代表無限次，默認 0。
chunkRetryInterval 重試間隔，值可以是任意正整數，如果是 null 則代表立即重試，默認 null。
progressCallbacksInterval 進度回調間隔，默認是 500。
speedSmoothingFactor 主要用於計算平均速度，值就是從 0 到 1，如果是 1 那么上傳的平均速度就等於當前上傳速度，如果說長時間上傳的話，建議設置為 0.02，這樣剩余時間預估會更精確，這個參數是需要和 progressCallbacksInterval 一起調整的，默認是 0.1。
successStatuses 認為響應式成功的響應碼，默認 [200, 201, 202]。
permanentErrors 認為是出錯的響應碼，默認 [404, 415, 500, 501]。
initialPaused 初始文件 paused 狀態，默認 false。
processResponse 處理請求結果，默認 function (response, cb) { cb(null, response) }。 0.5.2版本后，processResponse 會傳入更多參數：(response, cb, Uploader.File, Uploader.Chunk)。
processParams 處理請求參數，默認 function (params) {return params}，一般用於修改參數名字或者刪除參數。0.5.2版本后，processParams 會有更多參數：(params, Uploader.File, Uploader.Chunk, isTest)。
- autoStart {Boolean}
默認 true, 是否選擇文件后自動開始上傳。 - fileStatusText{Object}
{
success: 'success',
error: 'error',
uploading: 'uploading',
paused: 'paused',
waiting: 'waiting'
}
用於轉換文件上傳狀態文本映射對象。
0.6.0 版本之后，fileStatusText 可以設置為一個函數，參數為 (status, response = null)， 第一個 status 為狀態，第二個為響應內容，默認 null，示例：
fileStatusText(status, response) {
const statusTextMap = {
uploading: 'uploading',
paused: 'paused',
waiting: 'waiting'
}
if (status === 'success' || status === 'error') {
// 只有status為success或者error的時候可以使用 response
// eg:
// return response data ?
return response.data
} else {
return statusTextMap[status]
}
}
事件
.change(event) input 的 change 事件。
.dragover(event) 拖拽區域的 dragover 事件。
.dragenter(event) 拖拽區域的 dragenter 事件。
.dragleave(event) 拖拽區域的 dragleave 事件。
.fileSuccess(rootFile, file, message, chunk) 一個文件上傳成功事件，第一個參數 rootFile 就是成功上傳的文件所屬的根 Uploader.File 對象，它應該包含或者等於成功上傳文件；第二個參數 file 就是當前成功的 Uploader.File 對象本身；第三個參數就是 message 就是服務端響應內容，永遠都是字符串；第四個參數 chunk 就是 Uploader.Chunk 實例，它就是該文件的最后一個塊實例，如果你想得到請求響應碼的話，chunk.xhr.status 就是。
.fileComplete(rootFile) 一個根文件（文件夾）成功上傳完成。
.fileProgress(rootFile, file, chunk) 一個文件在上傳中。
.fileAdded(file, event) 這個事件一般用作文件校驗，如果說返回了 false，那么這個文件就會被忽略，不會添加到文件上傳列表中。
.filesAdded(files, fileList, event) 和 fileAdded 一樣，但是一般用作多個文件的校驗。
.filesSubmitted(files, fileList, event) 和 filesAdded 類似，但是是文件已經加入到上傳列表中，一般用來開始整個的上傳。
.fileRemoved(file) 一個文件（文件夾）被移除。
.fileRetry(rootFile, file, chunk) 文件重試上傳事件。
.fileError(rootFile, file, message, chunk) 上傳過程中出錯了。
.uploadStart() 已經開始上傳了。
.complete() 上傳完畢。
.catchAll(event, ...) 所有的事件。
重點說幾個事件:
fileAdded(file)：添加了一個文件事件，一般用做文件校驗，比如要校驗文件md5時，先觸發該事件。
fileSuccess(rootFile, file, message, chunk)：一個文件上傳成功事件，第一個參數 rootFile 就是成功上傳的文件所屬的根 Uploader.File 對象，它應該包含或者等於成功上傳文件；第二個參數 file 就是當前成功的 Uploader.File 對象本身；第三個參數就是 message 就是服務端響應內容，永遠都是字符串；第四個參數 chunk 就是 Uploader.Chunk 實例，它就是該文件的最后一個塊實例，如果你想得到請求響應碼的話，chunk.xhr.status 就是
fileError(rootFile, file, message, chunk)：上傳過程中出錯了。
fileProgress(rootFile, file, chunk)：一個文件在上傳中。
注意：所有的事件都會通過 lodash.kebabCase 做轉換，例如 fileSuccess 就會變成 file-success。
方法
.getRoot() 得到當前文件所屬的根文件，這個根文件就是包含在 uploader.fileList 中的.
.progress() 返回一個 0 到 1 的數字，代表當前上傳進度。
.pause() 暫停上竄文件。
.resume() 繼續上傳文件。
.cancel() 取消上傳且從文件列表中移除。
.retry() 重新上傳文件。
.bootstrap() 重新初始化 Uploader.File 對象的狀態，包括重新分塊，重新創建新的 XMLHttpRequest 實例。
.isUploading() 文件是否扔在上傳中。
.isComplete() 文件是否已經上傳完成。
.sizeUploaded() 已經上傳大小。
.timeRemaining() 剩余時間，基於平均速度的，如果說平均速度為 0，那么值就是 Number.POSITIVE_INFINITY。
.getExtension() 得到小寫的后綴。
.getType() 得到文件類型。
獲取Uploader實例
可以通過如下方式獲得：
mounted () {
this.$nextTick(() => {
window.uploader = this.$refs.uploader.uploader
})
}
//實例調用：
uploader.cancel()