javascript - 使用 reactjs 上传文件并处理 C :/fakepath/file

Question

我有一个简单的表单来上传一个文件，稍后我的后端 python 代码将处理该文件。但是，当我尝试上传文件时得到的是 C:\fakepath\test.txt 。

根据我所做的研究，这是出于安全考虑而预期和完成的。这很好，但现在我的问题是，我究竟该如何解决这个问题才能使用我在后端上传的文件？

我看了很多不同的地方，但似乎没有一个能解决这个问题。

这是我当前的代码:

class SomeForm extends Component{

    handleFile(e){
        this.setState({value: e.target.value});
    }

    handleSubmit(e){
        var me=this;
        if (this.state.value.length>0){
            var upload_file = this.state.value;
            const request = axios.post(this.props.cfg_url+'/upload', {upload_file})
                .then(function(response){
                console.log('successfully uploaded', upload_file);
            })

        }
    }

   render(){
      return(


           <Form inline onSubmit={this.handleSubmit}>
                        <FormGroup controlId='uploadFormId'>
                            <ControlLabel>Upload File:</ControlLabel>
                            <FormControl
                                type='file'
                                label='File'
                                onChange={this.props.onChange}
                            />
                        </FormGroup>
                        <Button type='submit'>Upload</Button>
                    </Form>
       );

   }
}

Answer 1

我不明白你为什么要 var upload_file = this.state.value; 如果你设置 var upload_file = this.state.value; 但你永远不要在状态对象中分配 value(在下面的示例中)。

我认为您使用的是 input['file'] 的 value 属性，而不是 files一。您必须使用 files 属性获取所选文件并使用 FormData interface映射表单参数。

class SomeForm extends Component {

    handleSubmit(e){
        if (e.target.input.files.length) {
            const upload_file = e.target.input.files[0];
            const formData = new FormData();
            formData.append('file', upload_file);

            const request = axios.post(this.props.cfg_url+'/upload', formData)
                .then(function(response){
                    console.log('successfully uploaded', upload_file);
                });
        } else {
            console.log('You need to select a file');
        }
    }

    render(){
        return(
            <Form inline onSubmit={this.handleSubmit}>
                <FormGroup controlId='uploadFormId'>
                    <ControlLabel>Upload File:</ControlLabel>
                    <FormControl
                        type='file'
                        name="input-file"
                        label='File'
                    />
                </FormGroup>
                <Button type='submit'>Upload</Button>
            </Form>
        );
    }
}

Live Example

来源:https://github.com/mzabriskie/axios/tree/master/examples/upload