How to handle images in Vue forms

How to handle images in Vue forms

question:

I have a form in Vue for uploading blog posts, it has scopes for title, body, description, snippet and image. Everything is necessary. I set up an API in Express to handle this. I tested it in Postman and it worked fine, but I don't know how to send the file to the database through the browser. I keep getting a 500 error, and I print the data to the console and the image field is empty, so I'm sure that's the problem, but I just can't figure out what.

This is the form of my front-end page:

<template>
 <div class="container">
  <div id="nav">
   <adminnav/>
  </div>
  <div id="create">
   <h1>Create new post</h1>
  </div>
  <div id="post">
   <body>
    <form>
     <label for="title">Title: </label>
     <textarea v-model=formdata.title rows="5" cols="60" name="title"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="body">Body: </label>
     <textarea v-model=formdata.body rows="5" cols="60" name="body"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="description">Description: </label>
     <textarea v-model=formdata.description rows="5" cols="60" name="description"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="snippet">Snippet: </label>
     <textarea v-model=formdata.snippet rows="5" cols="60" name="snippet"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="file">Upload photo: </label>
     <input
      class="form-control-file"
      type="file"
      accept="image/*"
      v-bind="formdata.photo"
     />
     <br/>
     <input id="submit" type="submit" value="submit" @click.prevent="createPost()"/>
    </form>
   </body>
  </div>
 </div>
</template>

<script>
import adminnav from '../components/adminnav.vue';
import PostService from '../service/PostService';

export default {
 name: 'createStory',
 components:
  adminnav,
 },
 data() {
  return {
   formdata: {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: null,
   },
  };
 },
 methods: {
  createPost() {
   console.log(this.formdata);
   /* eslint prefer-destructuring: 0 */
   const formdata = this.formdata;
   PostService.createPost(formdata)
    .then(() => {
     console.log('success');
    });
  },
 },
};
</script>

This is a POST request.

router.post("/add-story", upload.single('photo'), async(req, res) => {
 try{
  let post = new Post();
  post.title = req.body.title;
  post.description = req.body.description;
  post.photo = req.file.location;
  post.body = req.body.body;
  post.snippet = req.body.snippet;

  await post.save();

  res.json({
   status: true,
   message: "Successfully saved."
  });

 } catch(err) {
  res.status(500).json({
   success: false,
   message: err.message
  });
 }
});

Workaround

Let's monitor the change event of the file <input> . This ensures that each user upload behavior triggers updatePhoto method and stores the file data in this.photo .

<input type="file" accept="image/*" class="form-control-file"
  @change="updatePhoto($event.target.name, $event.target.files)"
>

Code to collect all the data and send the request

// The rest of the vue component data () {
  return {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: {} //Store file data};
},
methods: {
  updatePhoto (files) {
    if (!files.length) return;

    //Store file data this.photo = {
      name: files[0].name,
      data: files[0]
    };
  },
  createPost() {
    let formData = new FormData();

    formData.append('title', this.title);
    formData.append('body', this.body);
    formData.append('description', this.description);
    formData.append('snippet', this.snippet);
    formData.append('photo', this.photo.data, this.photo.name);

    PostService.createPost(formdata)
    .then(() => {
      console.log('success');
    });
  }
}
// The rest of the vue component

Obviously I've skipped a lot of things, like the whole vue component structure which I'm sure is irrelevant to this question, and some checks to ensure the file data is available before launching the request etc. This is an idea about how to get the file data, so hopefully this answer can inspire you.

The above is the details of how to process images in Vue forms. For more information about processing images in Vue forms, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue+elementUI implements form and image upload and verification function example
  • Vue axios form submission example to upload pictures
  • Use vue to build an upload image form

<<:  What to do if you forget the initial password of MySQL on MAC

>>:  Learn MySQL in a simple way

Recommend

Use Smart CSS to apply styles based on the user's scroll position

By adding the current scroll offset to the attrib...

How to use the flash plug-in to call the PC's camera and embed it into the TML page

Preface The reason for writing this article is mai...

How to modify the forgotten password when installing MySQL on Mac

1. Install MySQL database on mac 1. Download MySQ...

Detailed example of using typescript to encapsulate axios in Vue3

This axios package is used in the vue3 demo. For ...

Three networking methods and principles of VMware virtual machines (summary)

1. Brigde——Bridge: VMnet0 is used by default 1. P...

HTML tag ID can be a variable

<table id=" <%=var1%>">, the...

MySQL Basics Quick Start Knowledge Summary (with Mind Map)

Table of contents Preface 1. Basic knowledge of d...

Idea packaged into war package deployed to tomcat and access path issues (illustration and text)

The most important thing for idea to package a we...

SQL interview question: Find the sum of time differences (ignore duplicates)

When I was interviewing for a BI position at a ce...

How to install ElasticSearch on Docker in one article

Table of contents Preface 1. Install Docker 2. In...

CSS implements the web component function of sliding the message panel

Hello everyone, I wonder if you have the same con...

JavaScript to imitate the registration and login function of Xiaomi official website

Table of contents First we need to build the page...

Super detailed basic JavaScript syntax rules

Table of contents 01 JavaScript (abbreviated as: ...

About the problem of running git programs in jenkins deployed by docker

1. First, an error message is reported when assoc...

Differentiate between null value and empty character ('') in MySQL

In daily development, database addition, deletion...