Tengo una API que recibe la carga de archivos POST
como esto
curl -X POST -F upfile=@_mat/test.wav http://localhost:8008/upload/
El archivo se envía como upfile
mi código fuente es así a continuación, ¿dónde puedo configurar upfile ?
import React,{Component} from 'react'; import axios from 'axios'; const g_port = 8008; const g_api = `http://localhost:${g_port}`; class SpPage extends Component { state = { selectedFile: null }; onFileChange = event => { // Update the state this.setState({ selectedFile: event.target.files[0] }); }; // On file upload (click the upload button) onFileUpload = () => { // Create an object of formData const formData = new FormData(); // Update the formData object formData.append( "myFile", this.state.selectedFile, this.state.selectedFile.name ); console.log(this.state.selectedFile); // Request made to the backend api // Send formData object axios.post(`${g_api}/upload/`, formData) .then(res =>{ console.log(res); }) .catch(err=>{ console.log(err); }); }; // File content to be displayed after // file upload is complete fileData = () => { if (this.state.selectedFile) { return ( <div> <h2>File Details:</h2> <p>File Name: {this.state.selectedFile.name}</p> <p>File Type: {this.state.selectedFile.type}</p> <p> Last Modified:{" "} {this.state.selectedFile.lastModifiedDate.toDateString()} </p> </div> ); } else { return ( <div> <br /> <h4>Choose before Pressing the Upload button</h4> </div> ); } }; render() { return ( <div> <h1> GeeksforGeeks </h1> <h3> File Upload using React! </h3> <div> <input type="file" onChange={this.onFileChange} /> <button onClick={this.onFileUpload}> Upload! </button> </div> {this.fileData()} </div> ); } } export default SpPage;Ya tiene un formData y lo envía al punto final /upload en el cuerpo de la solicitud. para que pueda agregar su archivo formData upfile :
// rest of the codes ... formData.append( "myFile", this.state.selectedFile, this.state.selectedFile.name ); formData.append( "upfile", myWaveFile )