Как загрузить изображение в nuxt js и laravel 7 - PullRequest
Новая
       65

Как загрузить изображение в nuxt js и laravel 7

0 голосов
/ 05 августа 2020

Я разрабатываю приложение для электронной коммерции в nuxt js frontend и laravel backend. Но сложно загрузить изображение и сохранить его в базе данных. Может ли кто-нибудь помочь мне решить проблему?

1 Ответ

0 голосов
/ 06 августа 2020

Вот пример Nuxt или Vuejs загрузчика изображений с Laravel API. Я оставил для вас комментарий внутри кода.

Прежде всего, вы должны сделать загрузку. vue компонент с этим содержимым. 

<template>
  <div class="container">
    <label class="custom-file" for="file">
      {{files.length ? `(${files.length}) files are selected` : "Choose files"}}
      <input @change="handleSelectedFiles" id="file" multiple name="file" ref="fileInput" type="file">
    </label>

    <!--Show Selected Files-->
    <div class="large-12 medium-12 small-12 cell">
      <div class="file-listing" v-for="(file, key) in files">{{ file.name }} <span class="remove-file" v-on:click="removeFile( key )">Remove</span></div>
    </div>

    <!--Submit Button && Progress Bar-->
    <div>
      <button @click="upload">Start Upload</button>
      - Upload progress : {{this.progress}}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        files   : [],
        progress: 0
      }
    },
    computed: {
      /*The FormData : Here We Make A Form With Images Data To Submit.*/
      form() {
        let form = new FormData();

        this.files.forEach((file, index) => {
          form.append('files[' + index + ']', file);
        });

        return form;
      }
    },
    methods : {
      handleSelectedFiles() {
        let selectedFiles = this.$refs.fileInput.files;

        for (let i = 0; i < selectedFiles.length; i++) {
          /*Check Already Has Been Selected Or Not ...*/
          let isFileExists = this.files.find(file => file.type === selectedFiles[i].type && file.name === selectedFiles[i].name && file.size === selectedFiles[i].size && file.lastModified === selectedFiles[i].lastModified);

          if (!isFileExists)
            this.files.push(selectedFiles[i]);
        }
      },
      removeFile(key) {
        this.files.splice(key, 1);
      },
      upload() {
        const config = {
          onUploadProgress: (progressEvent) => this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        };

        this.$axios.post('host-url/upload-image', this.form, config)
          .then(res => {
            this.progress = 0;
            this.files = [];

            console.log(res)
          })
          .catch(err => console.log(err))
      }
    }
  }
</script>

<style>
  .custom-file {
    padding: 1.2rem;
    border-radius: .8rem;
    display: inline-block;
    border: 2px dashed #a0a0a0;
  }

  .custom-file input {
    display: none;
  }
</style>

После этого мы должны создать конечную точку в Laravel маршрутах API, таких как: 

Route::post('/upload-image', 'UploadController@image');

В последнем, поместите эти коды при загрузке 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function image(Request $request)
    {
        $request->validate([
            'files'   => ['required', 'array'],
            'files.*' => ['required', 'image','min:5','max:5000']
        ]);

        $uploadedFiles = [];

        foreach ($request->file('files') as $file) {
            $fileName = bcrypt(microtime()) . "." . $file->getClientOriginalExtension();
            $file->move('/uploads', $fileName);
            array_push($uploadedFiles, "/uploads/{$fileName}");
        }

        return response($uploadedFiles);
    }
}

Внимание: прогресс в localhost настолько быстр, то если вы хотите протестировать его при локальной загрузке файла размером более 50 МБ.

...