"Call to a member function store() on array" 使用 Laravel 8 和 Jetstream 上传文件 - Vue & Intertia 时.js

Question

我在从vue文件中的表单上传图像时遇到问题。我尝试了几种方法来做到这一点，但似乎没有正确设置文件。

• 我已经设置了"；enctype＝"；多部分/形式数据"；在我的表单标签

• 这是我的输入元素：

  <输入@change＝"；onFileChange"；type＝"；文件"；accept＝"接受"；图像/*"；class＝"；形式控制"；name＝"；文件"；id＝"；文件"；aria describedby="；helpId"；占位符＝"；上传文件"；/>

• 以下是我的数据对象和发送数据的方法：

  data() {
  return {
  editMode: false,
  professionaldevelopmentitems: [],
  professionaldevelopmentitem: {
  domain: 1,
  domaincategory: 1,
  title: "",
  dateofpd: "",
  location: "",
  lengthofpd: "",
  facilitatorname: "",
  facilitatorcredentials: "",
  reflection: "",
  file: "",
  },
  };
  },
  methods: {
  onFileChange(e) {
  alert(e.target.files[0]);
  alert(e.target.files[0].name);
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length)
  return;
  this.professionaldevelopmentitem.file = e.target.files[0];
  alert(this.professionaldevelopmentitem.file);
  },    
  async addProfessionalDevelopmentItem() {
  document.getElementById("pdForm").reset();
  this.editMode = false;
  const res = await axios.post(
  "/api/professionaldevelopmentitems",
  this.professionaldevelopmentitem
  );
  if (res.status === 201) {
  Toast.fire({
  icon: "success",
  title: res.data,
  });
  document.getElementById("pdForm").reset();
  $("#manageProfessionalDevelopmentItem").modal("hide");
  Fire.$emit("modifiedPDItem");
  }
  },
  async editProfessionalDevelopmentItem(data) {
  this.professionaldevelopmentitem = Object.assign({}, data);
  this.editMode = true;
  },
  async updateProfessionalDevelopmentItems(data) {
  const res = await axios.put(
  `/api/professionaldevelopmentitems/${data.id}`,
  this.professionaldevelopmentitem
  );
  if (res.status === 200) {
  Toast.fire({
  icon: "success",
  title: res.data,
  });
  document.getElementById("pdForm").reset();
  $("#manageProfessionalDevelopmentItem").modal("hide");
  Fire.$emit("modifiedPDItem");
  this.editMode = false;
  }
  },
  

我在控制器中接收数据并尝试存储文件：

公共函数更新(请求$Request，$id(｛

dd($request->all());
$this->validate($request, [
'title' => ['required'],
'dateofpd' => ['required'],
'lengthofpd' => ['required'],
'location' => ['required']
]);
$path = $request->file('filename')->store('uploads');
$pditem = ProfessionalDevelopmentItem::find($id);
$pditem->domain = $request->domain;
$pditem->domaincategory = $request->domaincategory;
$pditem->title = $request->title;
$pditem->dateofpd = $request->dateofpd;
$pditem->lengthofpd = $request->lengthofpd;
$pditem->location = $request->location;
$pditem->facilitatorname = $request->facilitatorname;
$pditem->facilitatorcredentials = $request->facilitatorcredentials;
$pditem->certificategranted = $request->certificategranted;
$pditem->certificateexpires = $request->certificateexpires;
$pditem->certificateexpiration = $request->certificateexpiration;
$pditem->reflection = $request->reflection;
$pditem->nameofinstitution = $request->nameofinstitution;
$pditem->coursename = $request->coursename;
$pditem->coursecode = $request->coursecode;
$pditem->hoursofinstruction = $request->hoursofinstruction;
$pditem->creditgranted = $request->creditgranted;
$pditem->bookname = $request->bookname;
$pditem->bookauthor = $request->bookauthor;
$pditem->bookyear = $request->bookyear;
$pditem->bookpublisher = $request->bookpublisher;
$pditem->otherdescription = $request->otherdescription;
$pditem->filename = $path;
$pditem->save();
return response('Successfully Updated the Professional Development Item.', 200);

}

当它试图存储文件时，返回的响应是一个错误：

"message": "Call to a member function store() on array",
"exception": "Error",

对我做错了什么有任何想法都将不胜感激。

Answer 1

尝试在FormData中发送上传的文件。在Vue组件中定义一个方法，用您想要通过ajax发送到服务器的所有数据来准备FormData

prepareFormData() {
let data = new FormData;
Object.keys(this.professionaldevelopmentitem).forEach(
key => data.append(key, this.professionaldevelopmentitem[key]
);
return data;
}

然后使用此方法获取FormData，并将其作为数据发送到addProfessionalDeveloomentItem和updataProfessionalDevelopmentItems中的服务器

async addProfessionalDevelopmentItem() {
document.getElementById("pdForm").reset();
this.editMode = false;
const res = await axios.post(
"/api/professionaldevelopmentitems",
this.prepareFormData()
);
if (res.status === 201) {
Toast.fire({
icon: "success",
title: res.data,
});
document.getElementById("pdForm").reset();
$("#manageProfessionalDevelopmentItem").modal("hide");
Fire.$emit("modifiedPDItem");
}
},

async updateProfessionalDevelopmentItems(data) {
const res = await axios.put(
`/api/professionaldevelopmentitems/${data.id}`,
this.prepareFormData()
);
if (res.status === 200) {
Toast.fire({
icon: "success",
title: res.data,
});
document.getElementById("pdForm").reset();
$("#manageProfessionalDevelopmentItem").modal("hide");
Fire.$emit("modifiedPDItem");
this.editMode = false;
}
}

然后，您应该在密钥文件$request->下的$request中获得上传的文件；文件

Answer 2

此错误表示$request->file('filename')返回数组。在我们的案例中，这是因为我们允许用户同时提交两个文件：

<form action="/upload" method="post" enctype="multipart/form-data">
@csrf
<input type="file" name="filename[]"><br>
<input type="file" name="filename[]"><br>
<input type="submit">
</form>

为了在Laravel 9中解决这个问题，我们在控制器的方法中添加了变量的类型检查：

public function upload(Request $request)
{
$file = $request->file('filename');
if (is_array($file)) {
foreach ($file as $item) {
$item->store('uploads');
}
} else {
$file->store('uploads');
}
// ...
}