javascript - Dropzone - 无法设置自定义 Dropzone.js 选项
问题描述
我正在尝试在我的 Laravel 网站上使用Dropzone.js 。
这是我的设置:
index.blade.php
:
<form action="/documents" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data">
@csrf
</form>
在我的app.js
文件中,我有以下代码:
window.Dropzone = require('dropzone');
(function () {
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
acceptedFiles: 'image/*,application/pdf',
parallelUploads: 8,
addRemoveLinks: false,
createImageThumbnails: false,
autoProcessQueue: true,
previewTemplate: document.getElementById('dropzone-preview-template').innerHTML,
accept: function (file, done) {
console.log(file.name)
},
};
});
实际的 Dropzone 元素出现在页面上,我可以使用它来上传文件。然而,我Dropzone.options
没有得到尊重。
例如,我可以上传大于 1MB 的文件,我可以上传所有文件类型,即使我只想上传图片和 PDF 文件。
如果我将 this: 移到Dropzone.autoDiscover = false;
之外(function () {});
,则 Dropzone 元素根本不起作用。
我做错了什么?
解决方案
您已将代码包含在匿名函数中但没有调用它,因此插件选项代码没有被执行。删除此匿名函数,或调用它,如下所示:
(function () {
})(); // call the function
推荐阅读
- php - 使用 PHP DOMXpath 解析 HTML
- angular - 如何在 inputText 中格式化日期
- reactjs - React router-dom 将状态从父组件传递到子路由器组件,在子组件中显示未定义
- javascript - 为什么 onmessage 监听器不处理初始 SSE 事件?
- react-native - React-native-reanimated:如何将值分配给 ScrollView scrollEnabled 属性?
- attributes - 您如何使用 MDX 计算 MTD/YTD 平均工作日销售额?
- javascript - 有没有办法将treesitter语法拆分为多个文件?
- python - 搜索列,如果值不是全数字,则将值剪切并粘贴到同一行的另一列 python pandas
- flutter - Flutter:滚动到长表单验证失败的表单字段
- ios - 作为@noescape 传递给Objective-C 的闭包参数已经逃逸