Tengo un formulario simple para cargar un archivo que luego se tratará con mi código python de back-end. Sin embargo, lo que obtengo cuando intento cargar el archivo es C:\fakepath\test.txt.
Según la investigación que hice, esto se espera y se hace debido a problemas de seguridad. Lo cual está bien, pero ahora mi pregunta es ¿cómo puedo evitar esto para poder usar el archivo que estoy cargando en mi back-end?
He buscado en un montón de lugares diferentes y ninguno de ellos parece abordar eso.
Aquí está mi código actual:
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> ); } }No entiendo por qué haces var upload_file = this.state.value; si está configurando var upload_file = this.state.value; pero nunca asigna value en el objeto de estado (en el ejemplo a continuación).
Creo que está utilizando la propiedad de value de la input['file'] en lugar de los files uno. Debe tomar el archivo seleccionado usando la propiedad de files y usar la interfaz FormData para mapear los parámetros del formulario.
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> ); } }Fuente: https://github.com/mzabriskie/axios/tree/master/examples/upload
La razón es porque está usando this.setState({value: e.target.value}) que solo actualizará el valor con la cadena fakepath y no con el elemento DOM real.
Estaba tratando de cargar un archivo en React que se usará como cuerpo para una solicitud GET usando fetch. Mi solicitud de obtención falló porque la carga útil del cuerpo es una cadena "C:/fakepath/file"
A continuación se explica cómo cargar un archivo usando los ganchos useRef y useEffect. En el siguiente ejemplo, paso el archivo a un enlace personalizado para la solicitud de 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> ) }Espero que sea útil para otros que enfrentan el problema "C:/fakepath/file" mientras cargan un archivo usando React y se encuentran con esta publicación de stackoverflow en busca de una solución
SM
const formData = new FormData(); formData.append("archivo", imagestudent[0] );
Axios .post('url', formData , { "headers" : { "Content-Type":"multipart/form-data", } } ) .then( res => { console.log(res.data) } )Y para la entrada
<input style={{ display: 'ninguno' }} accept="image/*" type="file" ref={fileInput}
onChange={e => setimagestudent(e.target.files)} />