Блог

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

моя форма:

            <label for="">Description</label>
            <textarea name="description" class="form-control" v-model="description"> </textarea> 
            <label for="">Images</label>
            <input type="file"  @change="fieldChange" class="form-control input-sm" name="images[]" 
            multiple>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
 

Раздел vue

  data(){
    return {
      id:'',
      price:'',
      title:'',
      description:'',
      location:'',
       images:[],
      
      }
    },
       
        methods:{
      fieldChange(e){
        let selectedFiles=e.target.files;
        if(!selectedFiles.length){
         return false;
             }
          for(let i=0;i<selectedFiles.length;i  ){
                this.images.push(selectedFiles[i]);// am able to console the images
            }
           },

          saveImageData(){
            var self=this;
            axios.post('/senddata',{
            title:this.title,
            description:this.description,
            location:this.location,
            images:this.images.file.name,
            price:this.price,
            })               
            },
 

Моя функция Laravel

   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]);
          }
    
 

Вот рабочий код для части vuejs — https://picupload.netlify.app /

https://github.com/manojkmishra/dw_take5/blob/master/src/components/ImageUploader.vue

Vue part

 <template>
<div class="uploader"
    @dragenter="OnDragEnter"
    @dragleave="OnDragLeave"
    @dragover.prevent
    @drop="onDrop"
    :class="{ dragging: isDragging }">
    
    <div class="upload-control" v-show="images.length">
        <label for="file">Select files</label>
        <button @click="upload">Upload</button>
    </div>


    <div v-show="!images.length">
        <i class="fa fa-cloud-upload"></i>
        <p>Drag your images here</p><div>OR</div>
        <div class="file-input">
            <label for="file">Select files</label>
            <input type="file" id="file" @change="onInputChange" multiple>
        </div>
    </div>

    <div class="images-preview" v-show="images.length">
        <div class="img-wrapper" v-for="(image, index) in images" :key="index">
            <img :src="image" :alt="`Image Uplaoder ${index}`">
            <div class="details">
                <span class="name" v-text="files[index].name"></span>
                <span class="size" v-text="getFileSize(files[index].size)"> </span>
            </div>
        </div>
    </div>
<div v-show="images.length" class="progress">
    <div
        class="progress-bar progress-bar-info progress-bar-striped"
        role="progressbar"  :aria-valuenow="progress"
        aria-valuemin="0"   aria-valuemax="100"
        :style="{ width: progress   '%' }"
    >
    {{ progress}}%
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default 
{   data: () => ({ isDragging: false, dragCount: 0, files: [],images: []  ,progress:0}),
methods: {
    OnDragEnter(e) {    e.preventDefault();
                        this.dragCount  ;
                        this.isDragging = true;
                        return false;
                    },
    OnDragLeave(e) {   e.preventDefault();
                        this.dragCount--;
                        if (this.dragCount <= 0)  this.isDragging = false;
                    },
    onInputChange(e) {  const files = e.target.files;
                        Array.from(files).forEach(file => this.addImage(file));
                    },
    onDrop(e) {console.log('ondrop-evnt e=',e)
        e.preventDefault();
        e.stopPropagation();
        this.isDragging = false;
        const files = e.dataTransfer.files;
        Array.from(files).forEach(file => this.addImage(file));
    },
    addImage(file) {console.log('addimage file=',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);
                    console.log('addimage this.images=',this.images)
                },
    getFileSize(size) { const fSExt = ['Bytes', 'KB', 'MB', 'GB'];
                        let i = 0;
                        while(size > 900) { size /= 1024; i  ; }
                        return `${(Math.round(size * 100) / 100)} ${fSExt[i]}`;
                      },
    upload() {  //this.progress = '0';
                const formData = new FormData();
                
                this.files.forEach(file => 
                {    formData.append('images[]', file, file.name);   });
                console.log('upload triggered FormData=',formData)
               // resp=axios.post('http://127.0.0.1:8000/sendemail1',this.formData); 
              //  axios.post('http://127.0.0.1:8000/api/imagesupload', formData,
                axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData,
                            {onUploadProgress:uploadEvent=>{  this.progress=Math.round(uploadEvent.loaded/uploadEvent.total*100);
                                        
                                    console.log('upld prges:'     Math.round(uploadEvent.loaded/uploadEvent.total*100) '%')
                                }
                            })
                //axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData)
                    .then(response => {
                        this.$toastr.s('All images uplaoded successfully');
                        this.images = [];
                        this.files = [];
                        this.progress = 0;
                        })
                            .catch(() => {
                                
                                this.$toastr.e('Could not upload the  files!');
                                this.images = [];
                                this.files = [];
                                this.progress = 0;
                                });
                                }
}
}
</script>
 

Другая версия с vuetify
https://github.com/manojkmishra/take5-front-admin/blob/master/src/components/img/imgup.vue

Вот часть laravel

 public function imagesupload(Request $request){
   if (count($request->images)) {
    foreach ($request->images as $image) {
        $image->store('images');
    }
  }
  return response()->json(["message" => "Done"]);
 }
 

Другой способ в laravel здесь
https://github.com/manojkmishra/take5-api/blob/master/app/Http/Controllers/PicController.php