Блог

У меня возникла проблема с загрузкой изображения из формы в файл vue. Я попробовал несколько способов сделать это, но, похоже, файл установлен неправильно.

• Я установил «enctype=»multipart/ form-data» в моем теге формы
• Вот мой входной элемент:

  <ввод @изменить=»onFileChange» тип = «файл» принять =»изображение /*» класс = «элемент управления формой» имя = «файл» идентификатор = «файл» aria-describedby=»Идентификатор справки» заполнитель=»Загрузить файл» />

• Вот мои объекты данных и методы, которые отправляют данные:

     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",
 

Любые мысли о том, в чем я не прав, будут оценены по достоинству.

Попробуйте отправить загруженный файл в FormData. Определите метод в компоненте Vue для подготовки FormData со всеми данными, которые вы хотите отправить через ajax на сервер

 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 в разделе key file $request->file(‘файл’)