vue项目 使用simple-uploader进行携带参数进行文件和文件夹上传
介绍：由于element的el-upload不支持文件夹上传，所以用了vue-simple-uploader，实现了文件夹/文件的携带form data 和 headers参数上传。vue-simple-uploader还能用于切分上传、断续上传，此处项目没有用到。
想对上传做更多的处理的小伙伴，推荐去看源码。
另：以下代码加了文件列表的拖拽。
1、安装：npm install vue-simple-uploader --save
在main.js里 加上：
import uploader from 'vue-simple-uploader'
Vue.use(uploader)2、
{
{$t('imgUpload.file')}}
{
{$t('imgUpload.folder')}}
文件列表
-
暂无待上传文件
3、
options: {
target: process.env.API_ROOT + "/api/File/UploadByBuffer",//地址
testChunks: false, //不校验
chunkSize: "10240000",
fileParameterName: "file", //上传文件时文件的参数名，默认file
maxChunkRetries: 3, //最大自动失败重试上传次数
query:{
//form data里的参数 根据实际需要
},
headers: {
// 在header中添加的验证 根据实际需要
}
},
panelShow: false, //上传列表的显示
attrs: {
// 接受的文件类型 根据实际需要
accept: [".zip", ".rar"]
},
collapse: false ,//列表的缩放
curTop:undefined,//标记当前列表的位置
curLeft:undefined,//标记当前列表的位置4、
//添加文件到列表 还未上传
onFileAdded(file) {
this.panelShow = true;
//设置headers等参数的值
},
//上传成功
onFileSuccess(rootFile, file, response, chunk) {
},
//文件进度的回调
onFileProgress(rootFile, file, chunk) {
},
//出错
onFileError(rootFile, file, response, chunk) {
},
//上传列表缩放
fileListShow() {
this.collapse = !this.collapse;
let oDiv = document.getElementById('filePanel')
if(this.collapse){
//屏幕高度
let h = document.body.clientHeight ||
window.innerHeight ||
document.documentElement.clientHeight ;
//屏幕宽度
let w = document.body.clientWidth ||
window.innerWidth ||
document.documentElement.clientWidth ;
this.curTop = oDiv.style.top;
this.curLeft = oDiv.style.left
oDiv.style.top = (h-40) + "px";
oDiv.style.left = (w-170) + "px";
}else{
//回到原来的位置
oDiv.style.top = this.curTop ;
oDiv.style.left = this.curLeft;
}
},
//关闭上传列表
close() {
this.panelShow = false;
},5、写了拖拽（不是必要）
directives: {
drag(el) {
let oDiv = el; //当前元素
let self = this; //上下文
//禁止选择网页上的文字
document.onselectstart = function() {
return false;
};
oDiv.onmousedown = function(e) {
//鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e) {
//通过事件委托，计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
//屏幕高度
let h = document.body.clientHeight ||
window.innerHeight ||
document.documentElement.clientHeight ;
//屏幕宽度
let w = document.body.clientWidth ||
window.innerWidth ||
document.documentElement.clientWidth ;
//左边菜单伸缩状态的宽度 图简单直接写了数字 严谨的小伙伴可以直接获取侧菜单的宽度
let leftBar = Cookies.get('sidebarStatus') == '0' ? 54 : 210
//判断有没有超过边界点
if (l > (w - oDiv.offsetWidth)) l = w - oDiv.offsetWidth;
if(l < leftBar) l = leftBar;
if (t > (h - oDiv.offsetHeight)) t = h - oDiv.offsetHeight;
if (t < 50) t = 50;
//移动当前元素
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
return false;
};
}
},6、写的样式（当作参考抛砖引玉）
.uploader {
float: right;
.uploader-btn {
background: #f5921f;
color: #fff;
height: 30px;
font-weight: normal;
line-height: 24px;
border: 0px;
font-size: 12px;
}
.uploader-btn:hover {
background: #ebae67;
}
}
.file-panel {
position: fixed;
bottom: 10px;
right: 10px;
background: #fff;
box-shadow: 1px 1px 5px #ccc;
border-radius: 5px;
z-index: 2;
width: 650px;
height: 340px;
.file-title {
border: 1px solid #cccccc4a;
font-size: 10px;
height: 40px;
line-height: 40px;
padding-left: 10px;
h2 {
margin: 0px;
display: inline-block;
font-weight: normal;
color: #666363;
}
.operate {
float: right;
margin-right: 10px;
}
}
.file-list {
list-style-type: none;
height: 300px;
overflow-y: scroll;
padding: 0px;
margin: 0px;
width: 100%;
.uploader-file-info i {
display: none;
}
}
}
.mini {
right: -490px;
bottom: -306px;
.operate {
margin-right: 500px !important ;
}
}
/************************分割线***************************/
鉴于一些小伙伴说query传参数仍传递不了，以及以上demo进行上传的时候需要点击而不是选择文件以后立刻自动上传的问题。
小伙伴可以下载以下链接代码进行参考，里面有现成例子。
https://github.com/simple-uploader/Uploader