اذهب إلى المحتوى
  • 0

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

Adam Ebrahim

السؤال

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

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

<input type="file" />

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

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

Recommended Posts

  • 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>
    );
  }
}

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...