我的项目涉及将一些照片拖到我的 React 应用程序上并能够上传它们。
我创建了一个照片状态,可以在上传时保存照片:
const [photo, setPhoto] = useState([]);
<块引用>
我的 dropzone 组件如下所示:
<div className="listItem__right__window__formWrapper">
<label className="listItem__right__window__inputLabel" htmlFor="">Upload Photo's:</label>
<Dropzone
className="dropzone"
autoUpload={false}
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
onSubmit={handleSubmit}
accept="image/*,audio/*,video/*"
inputContent={(photo, extra) => (extra.reject ? 'Only Image, audio and video files allowed!' : 'Select and Drop Files')}
styles={{
dropzoneReject: { borderColor: '#F19373', backgroundColor: '#F1BDAB' },
inputLabel: (photo, extra) => (extra.reject ? { color: '#A02800' } : {}),
}}
/>
<span className="listItem__right__window__nextIcon" onClick={clickNext}>
<KeyboardReturnIcon />
<h4>Press Enter To Advance</h4>
</span>
</div>
所以我的想法是:
<块引用>当我的 dropzone 组件发生变化时,我会调用 setPhoto 并存储当前上传的文件,如下所示:
// Return the current status of files being uploaded
const handleChangeStatus = ({ meta, file }, status) => {
setPhoto(this.props.files); //THIS DOESN'T WORK
}
遗憾的是这不起作用^^^
我可以看到文件是这样存储的:
有人可以帮助我以一种有效的方式访问 dropzones 道具中的文件,以便我可以控制它们吗?
谢谢!
答案 0 :(得分:0)
您似乎在使用 react-dropzone-uploader。如果我错了,请纠正我。
根据 documentation,您可以使用 onSubmit
属性传递一个函数,该函数将接收单击提交按钮时已完成上传的文件数组:
// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files, allFiles) => {
console.log(files.map(f => f.meta))
allFiles.forEach(f => f.remove())
}
return (
<Dropzone
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
onSubmit={handleSubmit}
accept="image/*,audio/*,video/*"
/>