vue-simple-uploader上传文件、图片和文件夹
<uploader:options="options"class="uploader-example":fileStatusText="fileStatusText":autoStart="autoStart"ref="uploader"@file-added="fileAdded"@file-error="errorUpload"@file-success="successUpload".
·
<uploader
:options="options"
class="uploader-example"
:fileStatusText="fileStatusText"
:autoStart="autoStart"
ref="uploader"
@file-added="fileAdded"
@file-error="errorUpload"
@file-success="successUpload"
@file-complete="fileComplete"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<div style="height: 10rem" class="flex a-c j-c">
<div style="text-align: center">
<i
class="fas fa-upload"
style="font-size: 2rem; color: #00bbff"
></i>
<div>拖动上传</div>
</div>
</div>
<!-- <uploader-btn>选择文件</uploader-btn> -->
<div class="flex j-c">
<uploader-btn :attrs="attrs">上传图片</uploader-btn>
<uploader-btn :directory="true">上传文件夹</uploader-btn>
</div>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
第一张图片为组件的基本用法
options: {
//上传地址
// target: "http://*******:9000/audit/upload",
target: "http://localhost:8081/upload",
testChunks: false,
// // 单文件上传
// singleFile: true,
// 上传文件会自动分块!!!
chunkSize: 1024 * 1024 * 1, //每块大小
simultaneousUploads: 5, //并发上传块数
//请求头
// headers: {
// "Content-Type": "multipart/form-data;charset=UTF-8",
// },
// 请求接口的参数名
fileParameterName: "file",
//处理接口的响应
processResponse: function (response, cb, file, chunk) {
//调用cb()回调函数,续传文件未上传的片段
//当为最后一个片段时,不再调用该回调函数
if (chunk.endByte < file.size || chunk.endByte < file.size) {
cb();
} else {
this.currentId = JSON.parse(response).id;
console.log(this.currentId);
}
},
maxChunkRetries: 0,
processParams: function (params) {
params.aa = 11;
// console.log(params);
return params;
},
parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
return parsedTimeRemaining
.replace(/\syears?/, "年")
.replace(/\days?/, "天")
.replace(/\shours?/, "小时")
.replace(/\sminutes?/, "分钟")
.replace(/\sseconds?/, "秒");
},
},
第二张图片为组件options的配置项
fileStatusText:可修改上传进度以及结果的文字----这是属性,和options同级哦
fileStatusText: {
success: "上传成功",
error: "上传失败",
uploading: "上传中...",
paused: "暂停",
waiting: "等待中...",
cmd5: "cmd5",
}
autoStart:布尔值--决定图片是否自动上传
@file-add 选取图片/文件/文件夹成功,
@file-success 一个片段上传成功
@file-error 一个片段上传失败
@file-complete 整个图片/文件/文件夹上传完成
fileAdded(file) {
// window.uploader.removeFile(file);
},
successUpload() {
console.log("success");
},
errorUpload() {
this.$message({
type: "warning",
message: "上传失败",
duration: 1000,
});
},
//整个根文件上传结束
fileComplete(rootFile) {
console.log("complete");
},
css可按照个人自行修改
//整个上传窗口样式
.uploader-example {
width: 44rem;
padding: 0.75rem;
margin: 2rem auto;
font-size: 0.6rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
//上传按钮样式
.uploader-example .uploader-btn {
margin-right: 0.2rem;
border: 0;
color: #fff;
height: 1.715rem;
border-radius: 0.15rem;
padding: auto;
&:hover {
opacity: 0.7;
}
&:nth-child(even) {
width: 7rem;
padding-left: 2rem;
background-color: #cd853f;
background-image: url(~@/assets/images/文件夹.png);
background-repeat: no-repeat;
background-size: 1rem;
background-position-y: center;
background-position-x: 0.8rem;
}
&:nth-child(odd) {
width: 7rem;
padding-left: 2rem;
background-color: #009fcc;
background-image: url(~@/assets/images/picture.png);
background-repeat: no-repeat;
background-size: 1rem;
background-position-y: center;
background-position-x: 0.8rem;
}
}
//上传列表展示样式
.uploader-example .uploader-list {
max-height: 22rem;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
此上内容为本人个人理解,应该有很多不足,只是帮助一些刚入门的,写的有错的,各位大佬帮忙指出。
官方文档:https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md
更多推荐
已为社区贡献1条内容
所有评论(0)