Javascript Ajax调用问题

我通过ajax调用发送一个图像属性文件。但是post api可能会因此而不断崩溃。我想将文件推送到formData中的image属性数组中，并成功调用api

我的Api表单数据配置如下图所示：

当我在控制台上检查formData图像属性数组时，我得到的是thing image attributes[]：[object file]，如下图所示： &我的api不断失败，并显示以下错误： 以下是我目前一直使用的代码：

/*NewPost.jsx*/

handleSubmit = (event) => {
        event.preventDefault();
        console.log("Submitting")
        let error = this.areThereAnyErrors();
        if(!error){
          let data = {};
          data.description = this.state.description.value || "";
          // console.log(this.state.images_attributes);
          data.images_attributes = this.state.images_attributes[0] || null;
          let brand_string = this.state.brand_ids[0].value;
          let brands_list = this.props.auto_complete_details.brand_json;
          let selected_brand = brands_list.find(function (brand) {
            return brand.brand_name.toLowerCase() == brand_string.toLowerCase();
          });
          if(selected_brand){
            this.state.brand_selected.value = selected_brand.brand_id;
          }

          if(this.state.brand_selected.value){
            data.Brand = this.state.brand_selected.value;
          } else {
            // console.log(this.state.brand_ids);
            data.custom_brand = this.state.brand_ids[0].value;
          }


          let product_string = this.state.product_ids[0].value;
          let product_list = this.props.auto_complete_details.product_json;
          let selected_product = product_list.find(function (product) {
            return product.product_name.toLowerCase() == product_string.toLowerCase();
          });
          if(selected_product){
            this.state.product_selected.value = selected_product.product_id;
          }


          if(this.state.product_selected.value){
            data.Product = this.state.product_selected.value;
          } else {
            data.custom_product = this.state.product_ids[0].value;
          }

          data.Price = this.state.price.value;
          this.props.onFormSubmit(data);
   }
 }

render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <div className={"row description new_post_desc "+error_class}>
          <div className="col-md-12 col-xs-12" style={{"paddingRight":"0px"}}>
              <textarea id="new_post_desc" name="description" className='new-post-description'   placeholder="Share your brand story..."  ref={(input) => {this.state.description = input}}/>
          </div>
        </div>
        <div className="description">
            <div className="row">
              <input id="new_post_image" className={this.state.errors.images_attributes ? "error-input disp_inline": "disp_inline"} type="file" name="image" accept="image/*" ref={(input) => {this.state.images_attributes[0] = input}} />
            </div>
            <div className="row margin-top-10">
              <div className="col-md-2 col-sm-2 col-xs-3 new_post_spacing">
                <input id='autocomplete_brand' className={this.state.errors.brand_ids ? 'typeahead error-input new_post_capsules tt-hint hint_user_info' : 'typeahead new_post_capsules hint_user_info'} type="text" name="brand" placeholder="Brand" ref={(input) => {this.state.brand_ids[0] = input}}/>
                <input id="brand_value_selected" style={{display: "none"}} value="" ref={(input) => {this.state.brand_selected = input}}/>
              </div>
              <div className="col-md-2 col-sm-2 col-xs-3 new_post_spacing">
                <input id='autocomplete_product' className={this.state.errors.product_ids ? 'typeahead error-input new_post_capsules tt-hint hint_user_info' : 'typeahead new_post_capsules hint_user_info'} type="text" name="product" placeholder="Product" ref={(input) => {this.state.product_ids[0] = input}}/>
                <input id="product_value_selected" style={{display: "none"}} value="" ref={(input) => {this.state.product_selected = input}} />
              </div>
              <div className="col-md-2 col-sm-2 col-xs-3 new_post_spacing">
                <input id='autocomplete_price' className={this.state.errors.price ? 'typeahead new_post_capsules tt-hint hint_user_info error-input' : 'typeahead new_post_capsules tt-hint hint_user_info'} type="number" name="price" placeholder="Price" ref={(input) => {this.state.price = input}}/>
              </div>
              <div className="col-md-2 col-sm-2 col-xs-3 new_post_spacing">
                <button type="submit" className="btn button-styling" style={{"outline":"none"}} disabled={this.props.new_post_creation_in_progress}>Share { loading_icon }</button>  
              </div>
            </div>     
        </div>
        <div className="row">
            { this.state.has_errors ? <div className="error_mesg">* Please provide required information</div> : '' }
        </div>
    </form>
  );
}

const mapDispatchToProps = (dispatch, ownProps) => {
  var that = this;
  return {
    dispatch,
    onFormSubmit: (data) => {
        dispatch(getNewPostDetails(data));
    }
  };
}

[]在属性名称的末尾，通常已经表示此字段是数组，而此字段的值不应是数组。因此，尝试使用：

formData.append('images_attributes[]', files[0]);
formData.append('images_attributes[]', files[1]);
formData.append('images_attributes[]', files[2]);
// etc..

而不是

formData.append('images_attributes[]', files);

---

同样的规则也适用于其他领域。

你的答案是正确的。但我犯的错误是另一个问题。问题解决后，我正在更新代码。问题在于在ajax post请求中发送头。我收到错误是因为发送带有发送formData的标题。因此，我刚刚注释掉了Ajax调用中的headers部分，问题得到了解决，您的解决方案也帮助了我，实际上我做得不对，将字段的值作为数组发送。非常感谢：

formData.append('images_attributes[]', files);