Uploading an image using Vue.js

Question

Uploading an image using Vue.js

Currently, I am utilizing the ElementUi uploader and facing an issue where the file details are not being sent correctly to the back-end along with my form data:

Screenshots

When I select an image, here is the console log:

https://i.sstatic.net/StfNl.png

Here is the data that is sent to the back-end:

https://i.sstatic.net/MOuWb.png

Code

Photo input section in my code:

<el-upload
    action="#"
    :limit="1"
    :multiple="false"
    :on-change="photoChanged"
    :on-exceed="handleExceed"
    list-type="picture-card"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
    :before-remove="beforeRemove"
    :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

Script section of my code:

export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            form: {
                name: '',
                slug: '',
                price: '',
                new_price: '',
                sku: '',
                qty: 1,
                active: '',
                photo: '',
                shortDesc: '',
                longDesc: '',
                region: '',
                date1: '',
                date2: '',
                type: [],
                tags: [],
                brand_id: '',
                categories: [],
                resource: '',
                user_id: ''
            }
        }
    },
    methods: {
        onSubmit(e) { // Sending data to back-end
            e.preventDefault();
            axios.post('/api/admin/products/store', this.form)
            .then(res => {
                console.log(res);
            })
            .catch(error => {
                console.log(error);
            })
        },
        handleRemove(file) {
            this.form.photo = ''; // Removing photo from form when it's deleted
        },
        photoChanged(file, fileList){
            this.form.photo = file.raw;  // Adding selected photo to form
            console.log('file', file) // Screenshot 1
            console.log('raw', file.raw) // Screenshot 2
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`The limit is 1, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally, remove old image and try again.`);
        },
        beforeRemove(file) {
            return this.$confirm(`Cancel the transfer of ${ file.name } ?`);
        }
    },
  }
</script>

Any suggestions or solutions?

javascript laravel vue.js element-ui

Answer 1

Answer №1

Encode your document in base64 format

Follow the code provided when choosing an image:

       handleImageSelection() {
          let selectedFile = this.form.picture

          if (selectedFile == '')
                return;

           this.convertToBase64(selectedFile);
       }

       convertToBase64(file) {
           let reader = new FileReader();
           let instance = this
           reader.onload = (e) => {
                instance.form.picture = e.target.files[0];      
           };
           reader.readAsDataURL(file);
       },

Connect the handleImageSelection function to your file input

Answer 2

Encode your document in base64 format

Follow the code provided when choosing an image:

       handleImageSelection() {
          let selectedFile = this.form.picture

          if (selectedFile == '')
                return;

           this.convertToBase64(selectedFile);
       }

       convertToBase64(file) {
           let reader = new FileReader();
           let instance = this
           reader.onload = (e) => {
                instance.form.picture = e.target.files[0];      
           };
           reader.readAsDataURL(file);
       },

Connect the handleImageSelection function to your file input

Answer 3

Answer №2

I utilized FormData to transmit the photograph or document to the server. Explore JavaScript FormData here

  <form id="myForm" name="myForm">
    <div>
        <label for="username">Please enter your name:</label>
        <input type="text" id="username" name="username" v-model="imageData.name">
      </div>
     <div>
        <label for="useracc">Enter your account number:</label>
        <input type="text" id="useracc" name="useracc" v-model="imageData.account">
      </div>
    <label for="userfile">Select file to upload:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

export default {
    data() {
        return { 
            imageData: {}
        }
    },
    methods: {
        uploadImageToServer() {
            // Step 1. Save the form Data and retrieve the new ID to save the image 
            axios.post('/api/admin/products/store', this.imageData)
            .then(res => {
                if(res.id) {
                //Step 2. Save the image to the retrieved ID
                let formData = new FormData();
                let file = document.getElementById('userfile');
                formData.append('file', file)
                axios.post('/api/admin/products/image/{id}', formData)
                    .then(res => {
                        console.log(res)
                    })
                }
            })
            .catch(err => {
                console.log(err)
            }) 

        }
    }
}

Here, Both form data & file data might not be transmitted in a single request. 1. Storing the form data first and receiving an ID. 2. Uploading the image data linked to the received ID. Remember to switch out the HTML with 'element-ui' syntax and ensure that your REST API accepts the form data as input.

Answer 4

I utilized FormData to transmit the photograph or document to the server. Explore JavaScript FormData here

  <form id="myForm" name="myForm">
    <div>
        <label for="username">Please enter your name:</label>
        <input type="text" id="username" name="username" v-model="imageData.name">
      </div>
     <div>
        <label for="useracc">Enter your account number:</label>
        <input type="text" id="useracc" name="useracc" v-model="imageData.account">
      </div>
    <label for="userfile">Select file to upload:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

export default {
    data() {
        return { 
            imageData: {}
        }
    },
    methods: {
        uploadImageToServer() {
            // Step 1. Save the form Data and retrieve the new ID to save the image 
            axios.post('/api/admin/products/store', this.imageData)
            .then(res => {
                if(res.id) {
                //Step 2. Save the image to the retrieved ID
                let formData = new FormData();
                let file = document.getElementById('userfile');
                formData.append('file', file)
                axios.post('/api/admin/products/image/{id}', formData)
                    .then(res => {
                        console.log(res)
                    })
                }
            })
            .catch(err => {
                console.log(err)
            }) 

        }
    }
}

Here, Both form data & file data might not be transmitted in a single request. 1. Storing the form data first and receiving an ID. 2. Uploading the image data linked to the received ID. Remember to switch out the HTML with 'element-ui' syntax and ensure that your REST API accepts the form data as input.

Answer 5

Answer №3

Issue Resolved

After some consideration, I have decided to change my approach when sending data to the backend by first uploading the image separately with the action="#" attribute in my input field. This way, I receive the file name in my form and can simply send the file name along with the rest of the form data instead of the entire image file.

<el-upload
  action="/api/upload"
  :on-success="handleAvatarSuccess"
.....>


methods: {
  handleAvatarSuccess(res, file) {
    this.form.photo = res.data;
  },
}

By implementing this method, the file is sent to the backend immediately upon selection, and the stored file name is assigned to form.photo, which is then included with the other form inputs for submission.

I believe this solution could be beneficial for others facing similar challenges.

Answer 6

Issue Resolved

After some consideration, I have decided to change my approach when sending data to the backend by first uploading the image separately with the action="#" attribute in my input field. This way, I receive the file name in my form and can simply send the file name along with the rest of the form data instead of the entire image file.

<el-upload
  action="/api/upload"
  :on-success="handleAvatarSuccess"
.....>


methods: {
  handleAvatarSuccess(res, file) {
    this.form.photo = res.data;
  },
}

By implementing this method, the file is sent to the backend immediately upon selection, and the stored file name is assigned to form.photo, which is then included with the other form inputs for submission.

I believe this solution could be beneficial for others facing similar challenges.

Uploading an image using Vue.js

Screenshots

Code

Answer №1

Answer №2

Answer №3

Issue Resolved

Similar questions

Using NodeJS to handle server side FormData

The bodyparser in Express seems to be malfunctioning

Do you know if there is a setting in prettier that allows line breaks to be preserved?

What is the best way to conceal a callback form once it has been successfully submitted?

Typescript declaration specifies the return type of function properties

Eliminate elements from an array within a promise

Utilize Element UI autocomplete to transfer data into a VueJS-powered table's input fields

methods to retrieve value from a javascript function

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

Develop a search feature that automatically filters out special characters when searching through a

Preserving input data based on click and change events

Guide on using webpack to import jQuery

Reliable selection menu for changing fields

When utilizing React router v5, the exact property in a route may not function as expected if there is a

What is the best way to implement a click event on the v-data-table component?

The ReCaptcha and AJAX Integration

The Material UI library is signaling that there is an unidentified property called `selectable` being used with the <table> tag

Converting Axios URL Parameter to Array of Strings in ExpressJS

Implementing changes in the last loop iteration to impact the final result in Vue

Tips for incorporating HTML code within a select option value?