如何使用 useState 附加文件？答案

【问题标题】：How do I use useState to attach files?如何使用 useState 附加文件？
【发布时间】：2021-07-09 08:46:29
【问题描述】：

我正在尝试执行此操作，文件已附加，但不清楚如何正确！

<form action="#">
                <div className="file-field input-field ">
                    <div className="btn indigo darken-1" >
                        <span>File</span>
                        <input type="file" multiple
                               onChange={e => setLesson({title:lesson.title,description: lesson.description,files:e.target.value})}>
                            </input>
                    </div>
                    <div className="file-path-wrapper ">
                        <input className="file-path validate" type="text" placeholder="Upload one or more files" style={{color: '#FFFFFF'}}/>
                    </div>
                </div>
            </form>

这里是 useState

    const [lesson,setLesson] = useState({
    title: '', description: '',files:{}
})

最终目标是将文件发送到服务器并有一个链接，如何使用这种方法呢？也就是说，当你点击 File 按钮时，你可以将文件附加到 useState

【问题讨论】：

那么您的实际问题是如何通过 ajax 发送文件？或者这里的“附加”是什么意思？
我想知道如何在课程中保存这些文件
我相信e.target.files 是你想要的。 developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… 。不过，这与 React 无关。
请使用event.target.files 而不是event.target.value

标签： javascript reactjs mern use-state

【解决方案1】：

使用e.target.files 来实现您的目标。

最后但并非最不重要的一点是，您的代码存在很多问题。

这里是修复：CodeSandbox

【讨论】：

文件将以数组形式出现，因此请使用e.target.files[0]。如果你使用files:{}codesandbox.io/s/affectionate-feynman-p6oi0?file=/src/App.js
那使用multiple有什么意义呢？