使用 Reactjs 的 Rails 6 Active Storage（功能组件）

发布于 2025-01-12 23:01:02 字数 2809 浏览 1 评论 0原文

我在使用带有 React js 的 Rails 主动存储上传照片的发布请求时遇到问题。 Rails 日志显示未经允许的参数：photos

所有 Active Storage 设置均已就位，如

storage.yml
本地：服务：磁盘 root: <%= Rails.root.join("存储")
环境开发：
config.active_storage.service = :local

Jobinfo控制器：

 def 创建
    @jobinfo = Jobinfo.create(params_jobinfo)
    渲染 json：@jobinfo，状态：201 如果@jobinfo.save！
 结尾


  def params_jobinfo 参数
    params.require(:jobinfo).permit(:client_name, 
                                    ：部门名称， 
                                    ：堵塞， 
                                    ：地址， 
                                    ：抱怨的本质， 
                                    :日期条目, 
                                    ：总，
                                    :defect_details_attributes => 
                                            [：ID， 
                                             ：工作信息_id， 
                                             ：缺陷， 
                                             ：推荐， 
                                             照片:[]],
                                    partsreplaces_attributes: [:id, :jobinfo_id, :sorcode, :quantity, :item, :rates, :subtotal,:_destroy]
    ）
结尾

DefectDetail <申请记录

属于：jobinfo
has_many_attached ：照片

Reactjs服务API函数：

 const createJobinfo = (
         部门名称，
         客户名称，
         日期输入，
         抱怨描述，
         地址，
         堵塞，
         全部的，
         缺陷信息，
         零件信息
      ）=> {

   常量工作信息 = {
        部门名称： 部门名称，
        客户名称： 客户名称，
        dateEntry: Moment(dateEntry).format("DD-MM-YYYY"),
        抱怨的性质：抱怨_desc，
        地址： 地址，
        块： 块，
        gtotal：总计，
        defect_details_attributes：defectinfo.map((defect_info) => {
        console.log(defect_info.photos) // 结果是 FileList{0: 文件, 长度: 1}
       返回 {
            缺陷：defect_info.defects，
            推荐：defect_info.recommendation，
            photos: Defect_info.photos // 该值为空 
        }
    }),

      partsreplaces_attributes: partsinfo.map((item) => {
       返回 {
       排序代码：项目.排序代码，
       项目：项目.项目，
       数量：商品.数量，
       费率：项目.费率，
       小计：项目.小计，
    };
   }),
 };

  轴
       .post(API_URL_JOBINFO,
       { 工作信息 },
       { 标题：标题
    })
   .then((响应) => {
   console.log(响应.数据);
   返回响应数据；
 });
};

当我 console.log(defect_info.photos) 时，结果是

          FileList {0: File, length: 1}

当我 console.log(defect_info.photos[0]) 第一个数组是

              File {name: 'dondon.png', lastModified: 1646625960330, lastModifiedDate: Mon Mar 07 2022 12:06:00 GMT+0800 (Philippine Standard Time), webkitRelativePath: '', size: 36662, …}

我在这个设置中错过了什么？希望有人能帮助我，我已经快几周找不到解决方案了。

原文

I am having the issue with post request for upload photos with rails active storage with react js. Rails log shows unpermitted parameter :photos

All Active Storage setups are in place like

storage.yml
local:
service: Disk
root: <%= Rails.root.join("storage")
environment development:
config.active_storage.service = :local

Jobinfo controller:

 def create
    @jobinfo = Jobinfo.create(params_jobinfo)
    render json: @jobinfo, status: 201 if @jobinfo.save!
 end


  def params_jobinfo
    params.require(:jobinfo).permit(:client_name, 
                                    :division_name, 
                                    :block, 
                                    :address, 
                                    :natureofcomplain, 
                                    :dateEntry, 
                                    :gtotal,
                                    :defect_details_attributes => 
                                            [:id, 
                                             :jobinfo_id, 
                                             :defects, 
                                             :recommendation, 
                                             photos:[]],
                                    partsreplaces_attributes: [:id, :jobinfo_id, :sorcode, :quantity, :item, :rates, :subtotal,:_destroy]
    )
end

DefectDetail < Application Record

belongs_to :jobinfo
has_many_attached :photos

Reactjs services API function:

      const createJobinfo = (
         division_name,
         client_name,
         dateEntry,
         complain_desc,
         address,
         block,
         total,
         defectinfo,
         partsinfo
      ) => {

   const jobinfo = {
        division_name: division_name,
        client_name: client_name,
        dateEntry: Moment(dateEntry).format("DD-MM-YYYY"),
        natureofcomplain: complain_desc,
        address: address,
        block: block,
        gtotal: total,
        defect_details_attributes: defectinfo.map((defect_info) => {
        console.log(defect_info.photos) // result is FileList {0: File, length: 1}
       return {
            defects: defect_info.defects,
            recommendation: defect_info.recommendation,
            photos:   defect_info.photos   // value of this is empty 
        }
    }),

      partsreplaces_attributes: partsinfo.map((item) => {
       return {
       sorcode: item.sorCode,
       item: item.item,
       quantity: item.quantity,
       rates: item.rates,
       subtotal: item.subtotal,
    };
   }),
 };

  axios
       .post(API_URL_JOBINFO,
       { jobinfo },
       { headers: header
    })
   .then((response) => {
   console.log(response.data);
   return response.data;
 });
};

when I console.log(defect_info.photos) the result is

          FileList {0: File, length: 1}

when I console.log(defect_info.photos[0]) first array is

              File {name: 'dondon.png', lastModified: 1646625960330, lastModifiedDate: Mon Mar 07 2022 12:06:00 GMT+0800 (Philippine Standard Time), webkitRelativePath: '', size: 36662, …}

What I missed in this setup? hope someone will help me its almost weeks I cannot find solutions.

分享到QQ

分享到微博