نحوه ارسال مقادیر فرم از ریکت به سرور

سلام
یک فرم دارم که از چند تا فیلد متنی و یک قسمت برای آپلود عکس تشکیل شده و کاربر با زدن دکمه submit فرم رو به سرور ارسال می کنه و مقادیر در دیتابیس ذخیره …

مشکلی که دارم اینه که نمی تونم عکس ها و فیلدهای متنی رو بصورت همزمان به سرور بفرستم. چطور باید اینکارو بکنم

  • با کد زیر فرم رو ارسال می کنم
    تو آرگومان دوم axios باید داده ها رو بفرستم ولی نمیشه . یا باید fd رو بزارم(fd همون عکساست) یا باید داده های متنی فرم. همزمان نمی تونم بفرستم.
handleSubmit=(e)=>{
   e.preventDefault();
   
     let fd=new FormData()
     this.state.images.map((file)=>{
       fd.append('file',file)
 
     })
     let myData={
         title:'title 1',
         body:'body 1'
     }
     axios.post(Keys.backendUrl+'/api/users/'+this.state.userID+'/sendAds',fd,{
       headers:{
          token:this.state.token,
           'Content-Type':'multipart/form-data'
              }
          })
           .then((data)=>{

               })

   }

  • با کد زیر داده ها رو می گیرم.
 router.post('/:userID/sendAds',upload.any(),(req,res)=>{
        
            // handle imags
            var adsImages=[]
            req.files.map((image)=>{
                adsImages.push(image.filename)
            })
            console.log('adsImages',adsImages)
              

             new AdsModel({
                title:req.body.title,
                body:req.body.body
             }) ...
           

 }
  • از react-dropzone برای اپلود عکس و از multer برای دریافت عکس از سرور استفاده می کنم.

اگه سوالم رو متوجه نشدید بگید تا بهتر توضیح بدم

سلام
فکر می کنم اضافه کردن Accept به header ها مشکل رو حل کنه:

    headers:{
      token:this.state.token,
      'Accept': 'application/json',
      'Content-Type':'multipart/form-data'
    }

فکر نمیکنم ربطی داشته باشه. این فقط به react میگه که منتظر json باش از طرف سرور.

1 Like

اوهوم، درسته.

پس احتمالا با ارسال اطلاعات در قالبی شبیه فایل ( blob ) بشه انجامش داد:

const obj = {
  title:'title 1',
  body:'body 1'
};
const json = JSON.stringify(obj);
const blob = new Blob([json], {
  type: 'application/json'
});
const fd = new FormData();
fd.append("document", blob);
this.state.images.map((file)=>{
  fd.append('file',file)
})
axios.post(
  Keys.backendUrl+'/api/users/'+this.state.userID+'/sendAds',
  fd,
  {
    headers:{
      token:this.state.token,
      'Content-Type':'multipart/form-data'
    }
  }
).then((data)=>{

})
1 Like

ری‌اکت کار نکردم ولی این منطقیه.

راه حل های بالا درست نیست! . خودم جوابش رو پیدا کردم. اینجا می زارم تا بقیه هم استفاده کنن.

اگه بخوایید همراه فرم تون ، فایل هم به سرور ارسال کنید باید همه فیلد ها رو به multipart /form-data انکود کنین. برای اینکای اول باید یک شی از FormData() که یک کلاس built-in جاوااسکریپته بسازید . بعد فیلدهای فرم تون رو به این شی ای که ساختید attach کنید و درانتها سمت سرور اونها رو بگیرید.

تو ریکت کد زیر :

  
    handleSubmit=(e)=>{
        e.preventDefault();
        
        // == append to form-data
          let fd=new FormData()
          this.state.images.map((file)=>{
            fd.append('files',file)
      
          })
          fd.append('title',this.state.title)
          fd.append('category',this.state.category)
....

            //    send images to server 
            axios.post(Keys.backendUrl+'/api/users/'+this.state.userID+'/sendAds',fd,{
                headers:{
                   token:this.state.token,
                   'Content-Type':'multipart/form-data'
                       }
                   })
                    .then((data)=>{
                        if(data){
                            
                            this.props.history.push('/user/manageAds')
                        }
                    })

تو سرور هم با req.body به مقادیر متنی فرم و با req.files به فایل های آپلود شده دسترسی دارید.(البته اگه از multer استفاده کنید)

2 Likes