Laravel Vue.js API: axios, FormData() 为空

Question

我正在尝试使用 Laravel 和 Vue.js 中的 API 更新模型中的一些数据，但我不能这样做，因为 FormData() 是空的，我是检查来自 formdata 的数据使用代码：

for (var value of formdata.values()) {
        console.log(value);
      }

它是空的。

我得到这个结果：

这是我在vue页面的更新功能

    getFile: function (event) {
      this.image = event.target.files[0];
    },
    updateData: function () {
      let config = {
        header: {
          "Content-Type": "multipart/form-data",
        },
      };
      let formdata = new FormData();
      formdata.append("user_id", this.userId);
      formdata.append("image", this.image);
      formdata.append("name", this.name);
      formdata.append("price", this.price);
      formdata.append("details", this.details);
      formdata.append("subject", this.subject);
      formdata.append("_method", "PUT");
      for (var value of formdata.values()) {
        console.log(value);
      }

      axios
        .post(
          "http://localhost:8000/api/edit-pro/" + this.products.id,
          formdata,
          config
        )
        .then(() => {
          //this.$router.push("/control-panel", response);
        });
    },

我应该更新数据的控制器方法

public function updatePro(Request $request, $id)
    {
        $product = Product::find($id);

        $product->name = $request->name;
        $product->price = $request->price;
        $product->details = $request->details;
        $product->subject = $request->subject;
        
        $file = $request->file('image');
        $fileName = $file->image;
        $destinationPath = public_path() . '/images';
        $file->move($destinationPath, $fileName);
        $product->image =  $fileName;
        
        try {
            $product->save();
            return ["msg" => "The product was updated successfully"];
        } catch (Exception $error) {
            return [
                "msg" => "The product was not updated successfully",
                "error" => $error,
            ];
        }
    }

HTML 和 vue.js 我使用我发送给函数的对象

<form
              id="main-contact-form"
              class="contact-form row"
              name="contact-form"
            >
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="name"
                  class="form-control"
                  required="required"
                  placeholder="اسم المنتج"
                  v-model="products.name"
                />
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="price"
                  class="form-control"
                  required="required"
                  placeholder="السعر"
                  v-model="products.price"
                />
              </div>
              <div class="form-group col-md-6">
                <select
                  name="subject"
                  class="form-control"
                  v-model="products.subject"
                >
                  <option value="اكسسوريز">اكسسوريز</option>
                  <option value="عنايه">عنايه</option>
                  <option value="مكياج">مكياج</option>
                  <option value="شنط">شنط</option>
                  <option value="عطور">عطور</option>
                  <option value="اجهزه">اجهزه</option>
                  <option value="ملابس نساء">ملابس نساء</option>
                  <option value="رجال">رجال</option>
                </select>
              </div>
              <div class="form-group col-md-6">
                <input
                  ref="image"
                  @change="getFile($event)"
                  type="file"
                  name="image"
                  class="form-control"
                  placeholder="اختر صورة المنتج"
                />
              </div>
              <div class="form-group col-md-12">
                <textarea
                  name="message"
                  id="message"
                  required="required"
                  class="form-control"
                  rows="8"
                  placeholder="وصف المنتج أو نبذة عنه"
                  v-model="products.details"
                ></textarea>
              </div>
              <div class="form-group col-md-12">
                <input
                  type="button"
                  name="submit"
                  class="btn btn-primary pull-right"
                  value="تعديل"
                  @click="updateData(products.id)"
                />
              </div>
            </form>

如果您有任何其他问题，请告诉我

非常感谢你们的帮助和想法！

Answer 1

您似乎有属性个产品，并且属性具有您想要获得的值。

所以改为：

formdata.append("image", this.image);
formdata.append("name", this.name);
formdata.append("price", this.price);
formdata.append("details", this.details);
formdata.append("subject", this.subject);

做：

formdata.append("image", this.image);
formdata.append("name", this.products.name);
formdata.append("price", this.products.price);
formdata.append("details", this.products.details);
formdata.append("subject", this.products.subject);

Laravel Vue.js API: axios, FormData() 为空

Laravel Vue.js API: axios, FormData() is empty

javascript

laravel

api

vue.js

axios