Multiple Image Uploader in Vue js and Laravel

Question

This is my template file and script file for multiple image uploader. When i select multiple images it work fine but my array is coming in this order as given picture.so how can i fix this ?

<input type="file" class="form-control" multiple accept="image/jpeg" @change="uploadImage"/>
<div  v-for="(image, key) in images" :key="key">
     <img :ref="'image'" class="preview" style="width:200px;"/>
      {{ image.name }}
 </div>

 

<script>
export default {
    data() {
        return {
            images: [],

        }
    },
    methods: {
        uploadImage(e) {
            let vm = this;
            var selectedFiles = e.target.files;
            for (let i = 0; i < selectedFiles.length; i++) {
                this.images.push(selectedFiles[i]);
            }
            for (let i = 0; i < this.images.length; i++) {
                let reader = new FileReader();
                reader.onload = (e) => {
                    this.$refs.image[i].src = reader.result;
                    console.log(this. image[i].src);
                };
                reader.readAsDataURL(this.images[i]);
            }
        },

    }
}

and my controller to upload multiple image .Does it work ?

public function addProductImages(Request $request){
    if($request->isMethod('post')){
        $data=$request->all();
        dd($data);
        if($request->hasFile('images')){
            $images=$request->file('images');

            foreach($images as $key=>$image){
                $productImage=new ProductsImage();
                $image_tmp=Image::make($image);
                $extension=$image->getClientOriginalExtension();
                $imageName=rand(111,999999).time().'.'.$extension;
                $large_image_path='backend/dist/products/alt/large/'.$imageName;
                $small_image_path='backend/dist/products/alt/small/'.$imageName;
                Image::make($image_tmp)->save($large_image_path);
                Image::make($image_tmp)->resize(520,600)->save($small_image_path);
                $productImage->image=$imageName;
                $productImage->product_id='1';
                $productImage->save();
            }
        }
    }
}

Leo · Accepted Answer · 2020-07-24 08:36:02Z

4

If you are trying to preview uploaded images your code could be simplified to this:

<div id="app">
<input type="file" class="form-control" multiple accept="image/jpeg" @change="uploadImage"/>
<div  v-for="(image, key) in images" :key="key">
     <img :src="image.src" class="preview" style="width:200px;"/>
      {{ image.file.name }}
 </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            images: [],

        }
    },
    methods: {
        uploadImage(e) {
            var selectedFiles = e.target.files;
            for (let i = 0; i < selectedFiles.length; i++) {
                let img = {
                    src: URL.createObjectURL(selectedFiles[i]),
                    file: selectedFiles[i],
                }
                this.images.push(img);
            }
        },

    }
}
</script>

answered Jul 24, 2020 at 8:36

Leo

7,4105 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurav Shrestha Over a year ago

thanks a lot...but doesnot work with controller. can you help me ? i have edited my question

Collectives™ on Stack Overflow

Multiple Image Uploader in Vue js and Laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related