上传文件时检索e.target.File时未定义

Question

我正在尝试获取此堆栈跟踪中的File值

但是我在调​​用它时却得到了一个未定义

console.log(e.target.File);

或

console.log(e.target)

我将如何访问文件值？

handleUpload = (e) => {
    const data = new FormData()
    console.log(e.target);

    // data.append('file', e.target.files[0])
    // data.append('name', 'some value user types')
    // data.append('description', 'some value user types')
    // Axios.post('/images/upload', data).then((response) => {
    // console.log(response);
    debugger;
    //   this.setState({
    //     imageUrl: response.data.fileUrl
    //   })

render(){
    return(
       .......           
            <ImageUploader
                withIcon={true}
                withPreview={true}
                buttonText='Upload an image'
                imgExtension={['.jpg', '.gif', '.png', '.gif']}
                onChange={this.handleUpload}
                maxFileSize={5242880}
                />
}

Answer 1

您似乎正在使用React ImageUploader组件，该组件已经在处理从事件中提取文件的问题。 e中的handleUpload不是事件，而是提取的文件列表。您应该直接使用此文件列表。

如果您想更好地理解，可以查看ImageUploader源，以了解其处理方式，但是可以通过e[0]访问文件（您可能希望重命名{{1 }}到e之类的内容中来）。

Answer 2

我们不知道ImageUploader的实现，但是从屏幕快照中可以看出，它使用文件数组调用了onChange方法。这样您就可以像这样访问它们：

handleImagesChange = images => {
  const firstImage = images[0];
  console.log(firstImage.name);
  this.setState({ images });
}

handleSubmit = () => {
  Axios.post('some/url', this.state.images)
    .then(console.log)
}