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