Material-UI DropZone“getFileAddedMessage”处理程序在单个字符串中返回多个文件名

Posted 2023-05-08

【中文标题】Material-UI DropZone“getFileAddedMessage”处理程序在单个字符串中返回多个文件名

【英文标题】：Material-UI DropZone "getFileAddedMessage" handler returning multiple file names in a single string

【发布时间】：2020-08-21 16:14:04

【问题描述】：

我正在使用 Material UI dropzone。 https://yuvaleros.github.io/material-ui-dropzone/。我可以一次删除多个文件。但是该组件在小吃店警报上返回所有文件名组合在一个字符串中。上传多个文件时，我希望每个文件都有单独的小吃吧警报。

任何建议或想法都会有所帮助。

【参考方案1】：

不幸的是，Material UI Dropzone 库不允许您访问多个小吃店警报，但您可以使用onDrop 属性和自定义小吃店库来实现这一点（您可以使用材料示例中的一个 - 在小吃吧页面的底部有一个使用 notistack 库的示例：https://material-ui.com/components/snackbars/)。

一些注意事项：

您需要删除getFileAddedMessage 方法（您不会使用它）。 您需要将 showAlerts 设置为 false（因为您手动管理警报，而不是使用 Material UI Dropzone 库。

这是 DropzoneArea 的示例：

<DropzoneArea
    acceptedFiles=["image/*", "video/*", "application/*"]
    onChange=this.handleChange.bind(this)
    showFileNames
    filesLimit=20
    showAlerts=false
    onDrop=e => 
      e.forEach(item => this.props.enqueueSnackbar(item.name));
    
/>

您可以在此处查看一个工作示例：https://codesandbox.io/s/mui-material-dropzone-multiple-snackbars-54rij?file=/src/index.js

【讨论】：

来自 mui-dropzone 的绝对大规模监督。它几乎完全消除了多次上传的好处。我真希望他们能揭露这一点。

这太棒了。我喜欢你的代码沙盒。它对我来说非常有效。赞一个！

【参考方案2】：

您需要使用alertSnackbarProps 道具

像这样：