題記：
（可直接跳過）
我剛實(shí)習(xí)的時(shí)候，就接手了一個(gè)任務(wù)：重寫項(xiàng)目中前端文件上傳功能，因?yàn)樾枰С治募A上傳這個(gè)功能點(diǎn)，考慮之后準(zhǔn)備用插件，最后選擇了vue-simple-uploader鳞青。但沒想到這個(gè)插件從我實(shí)習(xí)開始陪伴到我實(shí)習(xí)結(jié)束，剛開始時(shí)這個(gè)插件完成了大部分的需求为朋，但是文件夾上傳時(shí)臂拓，上傳速率和預(yù)計(jì)剩余時(shí)間一直不正確，我改了很久也沒成功习寸，后來因?yàn)槠渌拈_發(fā)任務(wù)就一直放在角落里吃灰胶惰。實(shí)習(xí)快結(jié)束時(shí)，恰好產(chǎn)品發(fā)布融涣，清一下bug童番，又撿了回來，重新根據(jù)需求優(yōu)化了這個(gè)插件威鹿，但是還是沒成功剃斧，無奈只好隱藏掉上傳速率和剩余時(shí)間，在實(shí)習(xí)結(jié)束之前忽你，成為了我的一個(gè)遺憾幼东。
學(xué)習(xí)教程：
關(guān)于這個(gè)插件，可以直接在GitHub上看官方文檔和源碼科雳，源碼很精煉根蟹。
官方git鏈接：https://github.com/simple-uploader/vue-uploader
寫的很好的使用教程：
https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html
https://www.helloweba.net/javascript/632.html
粗略的項(xiàng)目實(shí)現(xiàn)（上面給了兩個(gè)寫的很好的使用教程，可以去圍觀圍觀）：
- 安裝插件
npm install vue-simple-uploader --save
-
main.js中初始化
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
- 具體
vue文件中：template中
<uploader
:options="options"
:file-status-text="statusText"
:auto-start="false"
class="uploader-example"
ref="uploader"
@file-added="onFileAdded"
@file-success="onFileSuccess"
@file-error="onFileError"
@file-removed="fileRemoved"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<uploader-btn :attrs="attrs" style="background-color: #67C13B"><i class="el-icon-upload" style="margin-right: 5px"></i>上傳文件</uploader-btn>
<uploader-btn :directory="true" style="background-color: #79BBFF"><i class="el-icon-folder-add" style="margin-right: 5px"></i>上傳文件夾</uploader-btn>
</uploader-drop>
<uploader-list ></uploader-list>
</uploader>
<div slot="footer" class="dialog-footer">
<span class="filetotal">共計(jì): {{this.file_total}}</span>
<el-button type="danger" plain @click="errorDialog=true" v-show="controllerErrorFileDialog">錯誤信息</el-button>
<el-button @click="cancelUpload">取消上傳</el-button>
<el-button type="primary" @click="submitUpload">開始上傳</el-button>
</div>
-
data中數(shù)據(jù)定義
options: {
target: url,
maxChunkRetries: 2,
testChunks: false,
fileParameterName: 'contents',
chunkSize: 1024 * 1024 * 1024,
simultaneousUploads: 3,
query: {
type: '',
create_time: ''
},
headers: {
'Authorization': token
},
},
statusText: {
success: '上傳成功',
error: '上傳失敗',
uploading: '上傳中',
paused: '暫停中',
waiting: '等待中'
},
attrs: {
accept: [],
},
file_total: 0, //本次文件上傳的總數(shù)
errorfilelist: [], //上傳失敗信息列表
-
methods中
//添加文件到列表還未上傳,每添加一個(gè)文件糟秘，就會調(diào)用一次,在這里過濾并收集文件夾中文件格式不正確信息简逮，同時(shí)把所有文件的狀態(tài)設(shè)為暫停中
onFileAdded(file) {
let file_type = file.name.substring(file.name.lastIndexOf(".") + 1);
const extension = file_type === this.uploadType;
if (!extension) {
let obj = {
rootname: '無',
name: file.name,
errorinfo: "文件不是 " + this.uploadType + " 格式",
};
let arr=file.relativePath.split("/");
if(arr.length>1){
obj['rootname'] =arr[0]
}
this.errorfilelist.push(obj);
file.ignored = true
}else{
file.pause();
}
this.$nextTick(() => {
this.file_total=this.$refs['uploader'].files.length
});
if(this.errorfilelist.length !== 0){
this.controllerErrorFileDialog = true
}
},
//每個(gè)文件傳輸給后端之后，返回的信息
onFileSuccess(rootFile, file, response, chunk) {
let res=JSON.parse(response)
if(res.code!==10000){
let obj = {
rootname: '無',
name: file.name,
errorinfo: res.message,
};
if(rootFile.isFolder===true){
obj['rootname'] = rootFile.name
}
this.errorfilelist.push(obj);
this.controllerErrorFileDialog = true
}
},
// 上傳錯誤觸發(fā)尿赚，文件還未傳輸?shù)胶蠖? onFileError(rootFile, file, response, chunk) {
let obj = {
rootname: '無',
name: file.name,
errorinfo: "文件上傳失敗",
};
if(rootFile.isFolder===true){
obj['rootname'] = rootFile.name
}
this.errorfilelist.push(obj);
this.controllerErrorFileDialog = true
},
// 移除文件
fileRemoved(file){
this.$nextTick(() => {
this.file_total=this.$refs['uploader'].files.length
});
},
//點(diǎn)擊開始上傳按鈕
submitUpload() {
this.$nextTick(() => {
for(var i=0;i<this.$refs['uploader'].files.length;i++){
this.$refs['uploader'].files[i].resume()
}
});
},
//關(guān)閉錯誤文件提示框口散庶，知道上傳對話框被關(guān)閉時(shí)才會被清空
closeErrorDialog(){
this.errorDialog = false;
},
// 上傳彈框關(guān)閉
handelClose(){
this.clearcache()
this.thirdDialog = false
},
// 清除緩存
clearcache() {
this.file_total = 0;
this.errorfilelist=[]
this.controllerErrorFileDialog = false
this.$refs.uploader.uploader.cancel()
this.getresourceDetail();
},
//取消上傳
cancelUpload() {
this.thirdDialog = false;
this.clearcache();
},
-
css中樣式
// 文件上傳組件
.uploader-example {
width: 90%;
padding: 15px;
margin: 0 auto 0;
font-size: 14px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
margin-right: 8px;
color: #ffffff;
border: #ffffff;
}
/deep/ .uploader-example .uploader-list {
max-height: 300px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
.uploader-file[status="uploading"]> .uploader-file-info{
> .uploader-file-status > span> i{
visibility:hidden;
}
> .uploader-file-status > span> em{
visibility:hidden;
}
}
}
先這樣吧蕉堰，寫的比較粗糙，以后有時(shí)間會review進(jìn)行完善的悲龟。
