vue.js - dropzonejs无效的问题
本文介绍了vue.js - dropzonejs无效的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
正常效果代码为例2,test是加载vue页面的地方。
例1:
如果把
<div class="container" id="container" style="margin-left:192px">
<form action="/uimg" class="dropzone" id="new-theme" method="post">
</form>
</div>
放在vue组件中,在mounted中初始化dropzonejs,或者在全局初始化dropzonejs,都会无效,而且没报错。
例2:
<body>
<div id="test"></div>
<div class="container" id="container" style="margin-left:192px">
<form action="/uimg" class="dropzone" id="new-theme" method="post">
</form>
</div>
</body>
<script src="js/lib/dropzone/dist/dropzone.js"></script>
<script>
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
Dropzone.prototype.uploadFiles = function(files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
}
</script>
解决方案
mouted中实例化就行了
var dropz = new Dropzone("#dropz", {
url: "/upload",
maxFiles: 99,
maxFilesize: 512,
init: function() {
this.on("addedfile", function(file) {
console.log("addedfile");
});
}
});
具体配置参数还有很多,参照文档和需求做就行
http://wxb.github.io/dropzone...
这篇关于vue.js - dropzonejs无效的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文