题记：
（可直接跳过）
我刚实习的时候，就接手了一个任务：重写项目中前端文件上传功能，因为需要支持文件夹上传这个功能点，考虑之后准备用插件，最后选择了vue-simple-uploader。但没想到这个插件从我实习开始陪伴到我实习结束，刚开始时这个插件完成了大部分的需求，但是文件夹上传时，上传速率和预计剩余时间一直不正确，我改了很久也没成功，后来因为其他的开发任务就一直放在角落里吃灰。实习快结束时，恰好产品发布，清一下bug，又捡了回来，重新根据需求优化了这个插件，但是还是没成功，无奈只好隐藏掉上传速率和剩余时间，在实习结束之前，成为了我的一个遗憾。
学习教程：
关于这个插件，可以直接在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
粗略的项目实现（上面给了两个写的很好的使用教程，可以去围观围观）：
- 安装插件
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">共计: {{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中数据定义
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, //本次文件上传的总数
errorfilelist: [], //上传失败信息列表
-
methods中
//添加文件到列表还未上传,每添加一个文件，就会调用一次,在这里过滤并收集文件夹中文件格式不正确信息，同时把所有文件的状态设为暂停中
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
}
},
//每个文件传输给后端之后，返回的信息
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
}
},
// 上传错误触发，文件还未传输到后端
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
});
},
//点击开始上传按钮
submitUpload() {
this.$nextTick(() => {
for(var i=0;i<this.$refs['uploader'].files.length;i++){
this.$refs['uploader'].files[i].resume()
}
});
},
//关闭错误文件提示框口，知道上传对话框被关闭时才会被清空
closeErrorDialog(){
this.errorDialog = false;
},
// 上传弹框关闭
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;
}
}
}
先这样吧，写的比较粗糙，以后有时间会review进行完善的。
网友评论