反应JS中的Dropzone

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',

希望对你有帮助。