How do I upload image in vuejs?

vue image upload component
vue-picture-input
vuetify image upload
vue firebase file upload
vue image upload crop
image upload using vuejs
vue-upload-image example
vue-image-upload-resize

Please, below is my code in the script section of my vue component.

I'm getting all the input fields right but the image and video uploads are showing empty values.

I have tried to solve this issue but to no avail.

        playVideo(url) {
            let video = $('#video-preview').get(0);
            video.preload = 'metadata';
            // Load video in Safari / IE11
            if (url) {
                video.muted = false;
                video.playsInline = true;
                video.play();
            }
        },

        // Read a file input as a data URL.
        readDataUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    callback(fileReader.result);
                };
                fileReader.readAsDataURL(input.files[0]);
            }
            else {
                callback(null);
            }
        },

        // Read a file input as an object url.
        readObjectUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    let blob = new Blob([fileReader.result], {type: input.files[0].type});
                    let url = URL.createObjectURL(blob);
                    callback(url, blob);
                };
                fileReader.readAsArrayBuffer(input.files[0]);
            }
            else {
                callback(null);
            }

        },

    }

}

What exactly I want to achieve is upload image and video file, preview them before saving as blob.

The above image shows my response @samayo

The image and video blob are showing empty values.

If you are using axios or fetch uploading files with vue is pretty easy.

This is a copy/pasta from my current project. I use axios to upload images:

First you'll need to have your input look like this:

<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">

Then add a method like this:

methods: {

  uploadImage(event) {

    const URL = 'http://foobar.com/upload'; 

    let data = new FormData();
    data.append('name', 'my-picture');
    data.append('file', event.target.files[0]); 

    let config = {
      header : {
        'Content-Type' : 'image/png'
      }
    }

    axios.put(
      URL, 
      data,
      config
    ).then(
      response => {
        console.log('image upload response > ', response)
      }
    )
  }
}

Image Upload, vue-upload-image. Configurable image uploader with preview. drag and drop with input backup; image previews; simple resizing; events  Here are a few props that we’re going to make use of: ref: We’ll need this to access the base64 image string. width, height: Dictate the width and height of the component. accept: Used to restrict accepted file types. removable: Specifies whether the component can be reset or not.

I think in your case you are looking for a solution like this

example: uploading a image and previewing it before submission

<template>
   <div>
      <img src:"previewImage" class="uploading-image" />
      <input type="file" accept="image/jpeg" @change=uploadImage>
   </div>
</template>

<script>
    export default {
        name:'imageUpload',
        data(){
            return{
               previewImage:null
            }
        },
        methods:{
            uploadImage(e){
                const image = e.target.files[0];
                const reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onload = e =>{
                    this.previewImage = e.target.result;
                    console.log(this.previewImage);
                };
            }
        }
     }  // missing closure added
</script>



<style>
   .uploading-image{
     display:flex;
   }
 </style>

How do I upload image in vuejs?, We will also learn to filter the upload file type, for example, we only allow images, do not allow file type like PDF. Image uploader. Table of  Handling files is always a task. In this article, we will talk about how to uploads image using VueJs. We will create an images uploader that allow user to upload single or multiple images file by drag and drop or select file dialog.

If you want to upload an image and preview it before submission you can use simple and functional way as optionally.

<template>
  <input type="file" accept="image/*" @change="onChange" />
  <div id="preview">
    <img v-if="item.imageUrl" :src="item.imageUrl" />
  </div>
</template>


<script>
export default {
  name: 'imageUpload',
  data() {
    return {
      item:{
          //...
          image : null
          imageUrl: null
      }
    }
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      this.image = file
      this.item.imageUrl = URL.createObjectURL(file)
    }
  }
} 
</script>

vue-upload-image, Quick tutorial on using vue-picture-input in Vue apps to upload pictures to a Node​.js backend. VueJS Image Upload. In this tutorial we’ll create a VueJS image upload component so that users can upload an image to use as an avatar in the application. The goal is to re create the mechanism of an image upload via an html form, however it will all be done in a Vue component. This will allow for real time image updating in the browser,

How to Handle File Uploads in Vue 2 ― Scotch.io, The uploaded image should be saved in a FormData format to send to the back-​end; The component should check for a size limit in the uploaded  Vue.js is a JavaScript framework that allows us to build highly engaging web apps. Uploading images (or file upload in general) is a common requirement that can be difficult to implement. It doesn

Image Upload in Your Vue.js Apps With vue-picture-input, How to upload images using Node.js? How to validate uploaded files using Node​.js? File uploading using MERN stack. If you haven't, I can  Hi Guys, In this tutorial, I would like to share with you how to image upload using vue js laravel 5.6. We will image upload step by step from scratch so, don't worry if you are new with laravel or vue. we will use axios for post request and also pass csrf token with file upload in laravel 5.6.

How to build a flexible image uploader component using Vue.js 2.0, Vue component to upload images to rokka.io. A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate. In this tutorial I’m going to be using Axios v0.16.2 and VueJS v2.1.0 for doing the file uploads. On the back end you can use the framework that you want, or language that you want. I’ll talk about using PHP/Laravel to process files and more or less pseudo-code the backend process.

Comments
  • To which URL are you trying to upload? Is it put/post request?
  • I'm using: submit() { let data = new FormData; data.append('description', this.description); data.append('displays', this.boards); data.append('messages', JSON.stringify(this.messages)); /*for(let property in this.messages) { data.append('messages', JSON.stringify(this.messages[property])); }*/ axios.post('/campaign', data).then(response => { this.feedback = response.data; }).catch(response.data); }
  • How can I upload video file, preview it and save it as blob. That is what I'm trying to achieve. @samayo Same thing applies to the image file.
  • I know how you can capture an image by accessing user's camera and upload it, b/c I am working on a library that does that but I don't know how to record a video but it should be easy according to the specifications of mediaDevices I'll share maybe if I implement the feature here
  • @samayo how can I display it the image after I've choose it
  • @Choy I forgot, I worked on vue very briefly but I remember it was very easy, check this fiddle jsfiddle.net/97dzkf70 you can get the idea
  • @samayo btw may I know whats the ` const URL = 'foobar.com/upload'; ` refer to? If I'm using localhost should I change to localhost url?