title: PayloadTooLargeError: request entity too large when upload image
body: <p>I am trying to upload/and save an image in base64 format to my mongo database.
  If I use a very very  small image it works, but I try to use an image of 161 kb, I have this error:</p>
  
  <blockquote>
    <p>PayloadTooLargeError: request entity too large </p>
  </blockquote>
  
  <p>So I try to convert my image with Json but I got an error or it doesn't work, 
  Her my code ( I am using vue):</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="profile"&gt;
            &lt;div class="px-4"&gt;
              &lt;div class="row justify-content-center"&gt;
                &lt;div class="col-lg-3 order-lg-2"&gt;
                  &lt;div class="card-profile-image image-preview"&gt;
                    &lt;div v-if="profImage !=undefined &amp;&amp; profImage.length &gt; 0"&gt;
                    &lt;a&gt;
                      &lt;img
                        :src="profImage"
                        class="rounded-circle"
                      /&gt;
                    &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;div class="file-upload-form"&gt;
                        Upload image:
                        &lt;input
                          type="file"
                          @change="previewImage"
                          accept="image/*"
                        /&gt;
                      &lt;/div&gt;
                      &lt;div class="image-preview" v-if="imageData.length &gt; 0"&gt;
                        &lt;img class="preview" :src="imageData" /&gt;
                        &lt;button @click="updateUserImage"&gt;&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here my js file:</p>
  
  <pre><code>&lt;script&gt;
  import DataService from '@/services/DataService'
  export default {
    name: 'Profile',
    data: function() {
      return {
        username: '',
        imageData: '',
        profImage: '',
      }
    },
    methods: {
      previewImage: function(event) {
        var input = event.target
        if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader()
          reader.onload = e =&gt; {
            this.imageData = e.target.result
          }
          reader.readAsDataURL(input.files[0])
        }
      },
      async getAllInfo() {
        var userImage = await DataService.getUserImage({
          username: this.username
        })
        this.profImage = userInfo.data.user[0].profImage //IT Works
        this.profImage = JSON.parse(userInfo.data.user[0].profImage) //I get an error
      },
      async updateUserImage() {
        var temp = JSON.stringify(this.imageData)
        console.log(this.firstname)
        await DataService.updateUserInfo({
          username: this.username,
          user: {
            profImage: temp
          }
        })
      }
    },
    mounted() {}
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I try to use "JSON.parse(userInfo.data.user[0].profImage)"I get an error :</p>
  
  <blockquote>
    <p>"Unexpected token d in JSON at position 0"</p>
  </blockquote>
  
  <p>I also try with JSON.Stringify, but I get  is not a function.</p>
  
  <p>In my db, the image is saved in this way:</p>
  
  <pre><code>  profImage: {
      image: Buffer,
      require: false
    },
  </code></pre>
  
  <p>What am I doing wrong? I am using mongodb, vue , express and node.</p>