Dropzone in react JS

Question

我愿意实现一个dropzone来上传图像和pdf文件。有两个文件字段按钮。一个应该只上传图像，而另一个则假设上传唯一的pdf文件。

我给的最佳镜头是：

myDropzone = new Dropzone("#drop-zone", {
        url: "/file/post",
        acceptedFiles: "image/*",
        init: function () {
            this.options.acceptedFiles = '.pdf'
        });

$('#add_custom_logo_button, #add_pdf_file_button').on('click', (e) => {
        e.preventDefault();
        component.setState({acceptFiles: $(this).data('file-accepts')});
    });

HTML元素：

<div id="drop-zone" className="dropzone" data-file-accepts={this.state.acceptFiles}/>
<label class='control-label' for='add_custom_logo'>Custom Logo Image</label>
<button type='button'id='add_custom_logo_button' data-file-accepts="image/*"></button>
<div>
 <label class="control-label for="add_custom_logo" data-file-accepts="application/pdf">PDF File</label> 
 <label class="label-button" id="add_pdf_file_button">
   <span>Upload File </span>
 </label>
</div>

这里acceptFiles是我在组件的状态中提到了一个选项。如何限制每个文件字段的已接受文件类型？

Answer 1

我认为您需要创建两个不同的dropzone区域，并根据您的要求为每个区域分配接受的文件。为了只允许图像并考虑所有格式，我认为这个选项会更好。

acceptedFiles: '.png,.jpg,.jpeg',

希望能帮助到你。