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。

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

files

Live Example

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

Answer 2

原因是因为您使用的是this.setState({value: e.target.value})，它只会使用fakepath字符串而不是实际的DOM元素来更新值。

我试图在React中上传一个文件，该文件将用作使用fetch的GET请求的正文。我的get请求失败，因为主体有效载荷是字符串“ C：/ fakepath / file”

以下是使用useRef和useEffect挂钩上传文件的方法。在下面的示例中，我将文件传递给API请求的自定义钩子

export function App(){
    const [file, setFiles] = useState(null)
    const inputRef = useRef()

    useCustomFetchHook(file)

    return(
        <div>
            <input 
                type="file" id="input"
                // onChange={ e => setFiles(e.target.value)}
                onChange={() => setFiles(inputRef.current.files[0])}
                ref={inputRef}
            />
        </div>
    )
}

希望它对其他在React中使用文件上传时遇到“ C：/ fakepath / file”问题的人有帮助，并遇到此stackoverflow帖子以寻找解决方案

SM

Answer 3

const formData = new FormData(); formData.append("file", imagestudent[0]);

      Axios
          .post('url', 
          
       formData 
          ,
            {
                "headers" :
                                { 

                                  "Content-Type":"multipart/form-data",
                                }
            }
          
          )

          .then( 

            res => {
                console.log(res.data)
                
              
               
              
              }

          )

对于输入

onChange={e => setimagestudent(e.target.files)} />

使用reactjs上传文件并处理C：/ fakepath / file

3 个答案: