كيفية رفع ملف بإستخدام Axios في مكون React؟

يمكنك عمل upload لملف بالاستعانة ب formData

const handleFileUpload = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    axios({
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        data: formData,
        url: 'endponint',
      
    })
    .then((res) => {
      .....
    })
    .catch((err) => console.error(err));
};

في البداية انت تعمل فورم بشكل عادي لأي عدد تريد من الملفات وتضيف حالة State للإمساك بهذه الملفات 

ثم تقوم بإنشاء FormData جديد وتقوم بإضافة الملفات وفي المُدخل الأول تحدد اسم للملف وفي المُدخل الثاني تحدد الملف كما هو موضح في الكود

class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: null};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({file: event.target.files[0]});
  }

  handleSubmit(event) {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', this.state.file);

    axios({
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        data: formData,
        url: 'endponint',
      
    })
    .then((res) => {
      console.log(res)
    })
    .catch((err) => console.error(err));
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="file" onChange={this.handleChange} name="file"/>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}