如何在反应js中使用axios将图像上传到rest api？

Question

how to get file input in react js and then post it to an API.

const api = axios.create({
    baseURL: 'http://localhost:8000/adminuser/categoriesAPI/'
})
class Categories extends Component{

    
    constructor(props) {
        super(props);
        this.state = {
            category : [],
            id:'',
            image_url:null,
        }
        this.getCategories();
    }
    
    handleImage = (e) => {
        this.setState({image_url:e.target.files[0]})
    }
    addCategory =async () => {
        await api.post('/'{name:this.state.name,description:this.state.description,image_url:this.state.image_url})
    }
    render() {
        return(
            <>
             <button type="button" data-bs-toggle="modal" data-bs-target="#AddCategory" ><b>Add New</b</button>
 <div className="modal fade" id="AddCategory" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalLabel">Add Category</h5>
                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div className="modal-body">
                    <form>
                    <div className="mb-3">
                        <label className="col-form-label">Image Url:</label>
                        <input type="file" className="form-control" name="image_url" onChange={this.handleImage}/>
                    </div>
       
                    
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="reset" className="btn btn-primary" onClick={this.addCategory} data-bs-dismiss="modal">Submit</button>
                </div>
                </div>
            </div>
            </div>
 </>
        )
    }
} 

this is my code for uploading image file but when I select a file as input a blank gray screen shows. but if i see states using console.log() selected file's info is shown correctly.

Answer 1

You Can Upload files Using Form Data

addCategory =async () => {
const { image_url, description, name  } = this.state
    const formData = new FormData();
    formData.append('image_url', image_url, image_url.name) 
    formData.append("description", description)
    formData.append("name",name)
      await axios.post(
        "/",
        formData,
        {
            headers: {
                "Content-type": "multipart/form-data",
            },                    
        }
    )
    .then(res => {
        console.log(res)
    })
    .catch(err => {
 
        console.log(err);
    })
}