У меня проблема с загрузкой изображения из формы в файл vue. Я пробовал несколько способов сделать это, но кажется, что файл не установлен должным образом.
Я установил "enctype="multipart/form-data" в своем теге формы
Вот мой элемент ввода:
<ввод @change="при изменении файла" тип = "файл" принять = "изображение/*" класс = "управление формой" имя = "файл" идентификатор = "файл" ария-describedby="helpId" placeholder="Загрузить файл" />
Вот мои объекты данных и методы, которые отправляют данные:
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",
Любые мысли о том, что я ошибаюсь, будут оценены.
Спасибо, я просто добавил это - это не имеет значения.
попробуй проверить что внутри $request->file('filename')
с помощью dd($request->file('filename'));
null сбрасывается с этим. К вашему сведению, последнее предупреждение "alert(this.professionaldevelopmentitem.file);" показывает «[object File]», так что кажется, что professionaldevelopmentitem.file устанавливается вместе с файлом, но, похоже, по какой-то причине он не встречается
Если я запущу это: "dd($request->file);" ответ "[]".
вы используете неправильный dd, либо попробуйте выполнить весь запрос, используя dd($request)
, либо используйте $request->file('filename')
, также проверьте, что dd($request->hasFile('filename'))
возвращает true или false
Хорошо спасибо. dd($request->hasFile('filename'))
возвращает ложь
Я думаю, что на основе вашего кода компонента Vue файл должен быть доступен под ключом «файл». Попробуйте dd($request->hasFile('file'))
dd($request->hasFile('file'))
также возвращает false
Проверьте с dd($request->all())
и посмотрите, какие ключи есть
И "filename" => null
, и "file" => []
есть. «Имя файла» — это имя столбца, которое я пытаюсь обновить, указав путь ниже в функции обновления. Я обновил вопрос с помощью функции полного обновления.
Попробуйте отправить загруженный файл в 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 под ключевым файлом $request->file('file')
Эта ошибка означает, что $request->file('filename')
возвращает массив. В нашем случае это потому, что мы разрешили пользователям отправлять 2 файла одновременно:
<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');
}
// ...
}
не должно быть
$path = $request->file('filename')->store('uploads');