How to process images in Vue form

question:

I have a form form in Vue for uploading blog posts which have scopes like title, body, description, clips and pictures. Everything is necessary. I set up an API in Express to handle this. I'm testing in Postman ok, but I don't know how to send files to the database via browser. I keep getting 500 errors and I print the data to the console with the picture field empty so I'm sure that's the problem, but I just can't figure out what to do.

This is the form form for my front-end page:

<template>
 <div class="container">
  <div >
   <adminnav/>
  </div>
  <div >
   <h1>Create new post</h1>
  </div>
  <div >
   <body>
    <form>
     <label for="title">Title: </label>
     <textarea v-model= rows="5" cols="60" name="title"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="body">Body: </label>
     <textarea v-model= rows="5" cols="60" name="body"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="description">Description: </label>
     <textarea v-model= rows="5" cols="60" name="description"
      placeholder="Enter text">
     </textarea>
     <br/>
     <label for="snippet">Snippet: </label>
     <textarea v-model= 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=""
     />
     <br/>
     <input  type="submit" value="submit" @="createPost()"/>
    </form>
   </body>
  </div>
 </div>
</template>

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

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

This is a POST request.

("/add-story", ('photo'), async(req, res) => {
 try{
  let post = new Post();
   = ;
   = ;
   = ;
   = ;
   = ;

  await ();

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

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

Solution

Let's monitor files<input>In-housechangeevent. This ensures that every time the user upload behavior is triggeredupdatePhotoMethod and store file data to。

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

Encoding to collect all data and send requests

// Other parts of the vue componentdata () {
  return {
    title: '',
    body: '',
    description: '',
    snippet: '',
    photo: {} //Storing file data  };
},
methods: {
  updatePhoto (files) {
    if (!) return;

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

    ('title', );
    ('body', );
    ('description', );
    ('snippet', );
    ('photo', , );

    (formdata)
    .then(() =&gt; {
      ('success');
    });
  }
}
// vueOther parts of the component

Obviously, I skipped a lot of things like the entire vue component structure, which I believe has nothing to do with this issue, and some checks that make sure the file data is available before starting the request, etc. This is an idea about how to get file data, so hopefully this answer will inspire you.

The above is the detailed content of how to process pictures in Vue form. For more information about processing pictures in Vue form, please follow my other related articles!