最近有个项目,要上传无数素材到阿里云,找了很多layui的上传组件,感觉要么复杂化,要么就是没带进度条,layui官方的进度条是带了,但是没有上传到阿里云oss的,而且在折腾成功之前,layui的file还在前面,截止2022年11月8日,layui官方才更新了,把file放到表单域的后面。 但是我是没有多少去折腾官方那种上传oss的。后面找到了这个layui-aliossuploader的第三方组件,一番折腾,感觉蛮好。美中不足的是,没有进度条。
去作者blog查看,作者也说不会… 经历痛苦的搜索之后…思来想去,不就是ajax 嘛,看能否从这入手,加上这个进度条。。。。 debug一下午后,奇迹般搞定了。
然后再回过头来看,我靠,如此简单?真的是自己太菜了!
搁这保存起来警示警示吧。
带进度条的 aliossuploader.js
layui.extend({
}).define(['layer', 'upload','element'], function(exports) {
var $ = layui.$,
layer = layui.layer,
upload = layui.upload,
element=layui.element, //新加
allUploaded = {
},
policyFailed = null,
itemUploaded =null,
uploadData = [],
prefixPath,
layerTitle,
filesss = {
},
successCount = 0,
uploadCount = 0,
filesListView = null,
multiple = false,
multipleFileArray = [],
multipleFileKeyArray = [],
uplaod = layui.upload;
//加载样式
var Class = function(options) {
var that = this;
that.options = options;
that.init();
};
Class.prototype.init = function() {
var that = this,
options = that.options;
if (options.layerArea) {
layerArea = options.layerArea;
} else {
layerArea = 'auto';
}
if (options.multiple) {
multiple = true;
}
if (!that.strIsNull(that.options.fileType)) {
fileType = that.options.fileType;
}else{
fileType = 'file';
}
if (!that.strIsNull(that.options.httpStr)) {
httpStr = that.options.httpStr;
} else {
httpStr = 'https';
}
if (!that.strIsNull(that.options.policyFiled)) {
policyFiled = that.options.policyFiled;
} else {
policyFiled = 'policy';
}
if (!that.strIsNull(that.options.accessidFiled)) {
accessidFiled = that.options.accessidFiled;
} else {
accessidFiled = 'accessid';
}
if (!that.strIsNull(that.options.codeFiled)) {
codeFiled = that.options.codeFiled;
} else {
codeFiled = '';
}
if (!that.strIsNull(that.options.codeStatus)) {
codeStatus = that.options.codeStatus;
} else {
codeStatus = 0;
}
if (!that.strIsNull(that.options.signatureFiled)) {
signatureFiled = that.options.signatureFiled;
} else {
signatureFiled = 'signature';
}
if (!that.strIsNull(that.options.region)) {
region = that.options.region;
}
if (!that.strIsNull(that.options.prefixPath)) {
prefixPath = that.options.prefixPath;
} else {
prefixPath = '';
}
if (!that.strIsNull(that.options.policyUrl)) {
policyUrl = that.options.policyUrl;
}
if (typeof that.options.policyData != 'undefined') {
policyData = that.options.policyData;
} else {
policyData = {
};
}
if (