我正在制作一个上传脚本,但我一直在“addedfile”事件中从“file”获取 dataURL,这是我的代码:
$(function() {
var dropzone = new Dropzone('#avatar', {
url: '/uploads/avatar',
clickable: '.upload',
maxFilesize: 5,
maxFiles: 1,
previewsContainer: false,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
dropzone.on('addedfile', function(file) {
window.test = file;
document.getElementById('avatar').setAttribute('src', file.dataURL);
$('#loader').show();
});
dropzone.on('success', function(file, result) {
$('#avatar_url').val(result.url);
$('#loader').hide();
});
});
当执行以下脚本行时:
document.getElementById('avatar').setAttribute('src', file.dataURL);
图像的 src 属性变得未定义,如果我控制台日志 file.dataURL 它也是未定义的,但控制台日志记录只是“文件”正确记录对象;但是,当我进入浏览器控制台并执行以下操作时:
console.log(test.dataURL);
它正确输出数据 url,我可以成功使用它。
这是记录到控制台的“文件”的屏幕截图:
缩略图是异步生成的,这意味着dataURL
尚未生成时addedfile
事件被发出。有一个thumbnail event https://www.dropzonejs.com/#event-thumbnail生成缩略图时发出,传递dataURL
值作为第二个参数。
你可以这样做:
dropzone.on('thumbnail', function(file, dataURL) {
document.getElementById('avatar').setAttribute('src', dataURL);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)