• 0

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

لدي مكون React يتحتوي هذا المكون على نموذج form لرفع ملف، ولا أعرف كيف أقوم بإستخدام مكتبة Axios لكي أقوم برفع الملف من input معين؟

أعرف أنه في المواقع العادية أقوم بإستخدام عنصر input من نوع file كالتالي لرفع ملف ما:

<input type="file" />

لكن كيف أقوم بعمل نفس الشيء في مشروع React من نوع SPA؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك عمل 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));
};

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في البداية انت تعمل فورم بشكل عادي لأي عدد تريد من الملفات وتضيف حالة 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>
    );
  }
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن