Многократное вставление изображения Laravel, Vue, Axios - PullRequest
1 голос
/ 24 октября 2019

я впервые делаю несколько загрузок файлов для vue js laravel. Мне удалось создать несколько изображений в laravel, но только одно, сохраненное в базе данных, не совпадает с запрошенным изображением, которое было введено. что-то вроде этого - мой код.

в моем диспетчере laravel.

public function storeProduct()
{

    $data = $this->request->all();

    $query['gallery'] = new ProductGallery;

    if ($this->request->hasFile('images')) {
        if (count($this->request->images) > 1) {
            foreach($this->request->file('images') as $file){

                //filename to store
                $query['gallery']->product_id = 2;
                $filename = md5($file . time()) . '.jpg';

                Storage::disk('public')->put($filename, file_get_contents($file));

                $path = public_path('storage/article-image/'.$filename);
                Image::make($file)->save($path);
                $query['gallery']->file_path = 'article-image/'.$filename;                       
                $query['gallery']->save(); 
            }
        }else {
            return "not array";
        }
    }
    return "Success";
}

в шаблоне Vue Js.

<template>
  <div class="file-input">
    <label for="file">Select a File</label>
    <input type="file" id="file" @change="onInputChange" multiple>
  </div>
</template>

data() {
  return {
    files: [],
    images: [],
  }
},
methods: {
    onInputChange(e) {
        const files = e.target.files;
        Array.from(files).forEach(file => this.addImage(file));
    },
    addImage(file) {
        if (!file.type.match('image.*')) {
            this.$toastr.e(`${file.name} is not an image`);
            return;
        }
        this.files.push(file);
        const img = new Image(),
            reader = new FileReader();
        reader.onload = (e) => this.images.push(e.target.result);
        reader.readAsDataURL(file);
    },
    upload() {
        const formData = new FormData();
        this.files.forEach(file => {
            formData.append('images[]', file, file.name);
        });
        axios.post('http://localhost.pro/api/v1/product-store', formData)
            .then(response => {
                console.log(response);
            })
    }
}

, пожалуйста, помогите, извините, мой английский пассивен. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...