是的你可以。
来自官方现场示例:
// https://github.com/quarklemotion/html5-file-selector
import { getDroppedOrSelectedFiles } from 'html5-file-selector'
const CustomInput = () => {
const handleSubmit = (files, allFiles) => {
console.log(files.map(f => f.meta))
allFiles.forEach(f => f.remove())
}
const getFilesFromEvent = e => {
return new Promise(resolve => {
getDroppedOrSelectedFiles(e).then(chosenFiles => {
resolve(chosenFiles.map(f => f.fileObject))
})
})
}
return (
<Dropzone
accept="image/*,audio/*,video/*,.pdf"
getUploadParams={() => ({ url: 'https://httpbin.org/post' })}
onSubmit={handleSubmit}
InputComponent={Input}
getFilesFromEvent={getFilesFromEvent}
/>
)
}
Input
您提供的自定义组件在哪里:
const Input = ({ accept, onFiles, files, getFilesFromEvent }) => {
const text = files.length > 0 ? 'Add more files' : 'Choose files'
return (
<label style={{ backgroundColor: '#007bff', color: '#fff', cursor: 'pointer', padding: 15, borderRadius: 3 }}>
{text}
<input
style={{ display: 'none' }}
type="file"
accept={accept}
multiple
onChange={e => {
getFilesFromEvent(e).then(chosenFiles => {
onFiles(chosenFiles)
})
}}
/>
</label>
)
}
为了阐明这与您的代码有何不同:您只是将自定义添加<input>
为<Dropzone>
. 您需要按照上述方式进行操作,以便将两者正确“连接”在一起。