使用 Vue Js 和 Laravel 上传多张图片

时间:2021-02-07 11:50:10

标签: laravel vue.js laravel-vue

我正在将 Laravel 刀片更改为 Vue 组件。我能够使用刀片将包括图像详细信息在内的所有数据保存到数据库中。现在更改为 Vue 组件后,无法捕获图像。不知道该怎么做。这是我的代码:
形式

 <form enctype="multipart/form-data" @submit.prevent="saveImageData" >
                <label for="">Title</label>
                <input type="text" class="form-control  input-sm" name="title" v-model="title">
                <label for="">Price (Ksh)</label>
                <input type="number" class="form-control input-sm" name="price" v-model="price">
                <label for="">Location</label>
                <input type="text" class="form-control input-sm" name="location" v-model="location">
                <label for="">Description</label>
                <textarea name="description" class="form-control" v-model="description"> </textarea> 
                <label for="">Images</label>
                <input type="file" class="form-control input-sm" name="images[]" multiple>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>   

定义:

export default {
          data(){
    return {
      id:'',
      price:'',
      title:'',
      description:'',
      location:'',
       images:[],
      
      }
    },   
        methods:{
          saveImageData(){
            var self=this;
            axios.post('/senddata',{
            title:this.title,
            description:this.description,
            location:this.location,
            images:this.images,// here is the problem
            price:this.price,
            }) .then(response => { 
              console.log(response)
           })

在我的控制器中

 public function store(Request $request)
        {
              $product=Products::create([
             'title'=>$request['title'],
             'description'=>$request['description'],
             'price'=>$request['price'],
             'location'=>$request['location']
                 ]);
              $images= $request->file('images');
              foreach ($images as $image){
               $move=$image->move(public_path().'/images2/',$image->getClientOriginalName()); 
             if($move){
             $imagedata=Images::create([
            'title'=>$image->getClientOriginalName(),
            'filename'=>$image->getClientOriginalName()
            ]);
             $product->images()->attach([$imagedata->id]);
              }
             }   
           var_dump('image uploaded');
        }

0 个答案:

没有答案