图像上传Laravel 7 VueJS
我想上传图像到服务器，并显示在列表中。我希望使用相同的函数“addProduct”来存储图像（标题和描述成功） 获取的文件是后端中的空消息。我在谷歌上搜索了很多次，但都没有解决我的问题 对不起，我没有编程经验。提前谢谢你的帮助图像上传Laravel 7 VueJS,laravel,image,vue.js,upload,Laravel,Image,Vue.js,Upload,我想上传图像到服务器，并显示在列表中。我希望使用相同的函数“addProduct”来存储图像（标题和描述成功） 获取的文件是后端中的空消息。我在谷歌上搜索了很多次，但都没有解决我的问题 对不起，我没有编程经验。提前谢谢你的帮助 <!-- Vue JS --> <!-- Add Product Modal --> <div>
<!-- Vue JS -->
<!-- Add Product Modal -->
<div>
<b-modal v-model="addModal" hide-footer title="Add New Product">
<div class="d-block text-center">
<b-form
@submit.stop.prevent="onSubmit"
enctype="multipart/form-data"
>
<b-form-group>
<b-form-input
v-model="$v.data.title.$model"
:state="validateState('title')"
class="mt-3"
placeholder="Enter Title"
></b-form-input>
<b-form-invalid-feedback
>This field is required and must be at least 3
characters.</b-form-invalid-feedback
>
</b-form-group>
<b-form-group>
<b-form-textarea
v-model="$v.data.description.$model"
:state="validateState('description')"
class="mt-3"
debounce="500"
rows="3"
max-rows="5"
placeholder="Enter Description"
></b-form-textarea>
<b-form-invalid-feedback
>This field is
required.</b-form-invalid-feedback
>
</b-form-group>
<!-- upload form -->
<b-form-file
v-model="data.imageName"
:state="Boolean(data.imageName)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
v-on:change="onFileChange"
>
</b-form-file>
<div class="mt-3">
Selected File:
{{ data.imageName ? data.imageName.name : "" }}
</div>
<!-- upload form -->
<b-button
type="submit"
class="mt-3"
variant="outline-success"
block
@click="addProduct"
:disabled="isAdding"
:loading="isAdding"
>{{ isAdding ? "Adding.." : "Add" }}</b-button
>
<b-button
class="mt-3"
variant="outline-danger"
block
@click="addModal = false"
>Close</b-button
>
</b-form>
</div>
</b-modal>
</div>
export default {
mixins: [validationMixin],
data() {
return {
data: {
title: "",
description: "",
imageName: []
},
dismissSecs: 5,
dismissCountDown: 0,
filename: "",
file: "",
success: "",
errorMsg: {
status: false,
title: ""
},
successMsg: {
status: false,
title: ""
}
},
resetForm() {
this.data = {
title: "",
description: ""
};
this.$nextTick(() => {
this.$v.$reset();
});
},
onSubmit() {
this.$v.data.$touch();
if (this.$v.data.$anyError) {
return;
},
onFileChange(e) {
//console.log(e.target.files[0]);
this.filename = "Selected File: " + e.target.files[0].name;
this.file = e.target.files[0];
},
async addProduct() {
if (
this.data.title.trim() == "" ||
this.data.description.trim() == "" ||
this.data.title.length < 3
)
return console.log("error fill required fields!");
const res = await this.callApi(
"post",
"products/create_product",
this.data
);
if (res.status === 201) {
this.products.unshift(res.data);
this.showAlert("Product added successfully.");
this.addModal = false;
this.data.title = "";
this.data.description = "";
this.data.imageName = [];
} else {
if (res.status == 422) {
if (
res.data.errors.title ||
res.data.errors.description ||
res.data.errors.imageName
) {
console.log(res.data.errors);
}
} else {
console.log(this.data.imageName);
console.log("Something went wrong.");
}
}
this.resetForm();
},
async created() {
const res = await this.callApi("get", "products/get_products");
if (res.status == 200) {
this.products = res.data;
} else {
console.log("error occured!");
}
}
};
class AdminController extends Controller
{
public function addProduct(Request $request)
{
// validate addProduct request
$this->validate($request, [
'title' => 'required',
'description' => 'required'
]);
if ($request->hasFile('imageName')) {
$upload_path = public_path('upload');
$imageName = $request->file('imageName')->getClientOriginalName();
$generated_new_name = time() . '.' . $request->file('imageName')->getClientOriginalExtension();
$request->file('imageName')->move($upload_path, $generated_new_name);
$insert['imageName'] = $imageName;
$check = Products::insertGetId($insert);
return Products::create([
'title' => $request->title,
'description' => $request->description,
// 'imageName' => $request->imageName
]);
} else {
return 'file is empty!!!';
}
}
为什么将
imageName:[]dataimageName:“const fd=new FormData（）fd.append（'title'，this.data.title） class AdminController extends Controller
{
public function addProduct(Request $request)
{
// validate addProduct request
$this->validate($request, [
'title' => 'required',
'description' => 'required'
]);
if ($request->hasFile('imageName')) {
$upload_path = public_path('upload');
$imageName = $request->file('imageName')->getClientOriginalName();
$generated_new_name = time() . '.' . $request->file('imageName')->getClientOriginalExtension();
$request->file('imageName')->move($upload_path, $generated_new_name);
$insert['imageName'] = $imageName;
$check = Products::insertGetId($insert);
return Products::create([
'title' => $request->title,
'description' => $request->description,
// 'imageName' => $request->imageName
]);
} else {
return 'file is empty!!!';
}
}
<-- web php file -->
Route::post('products/create_product', 'AdminController@addProduct');