PayloadTooLargeError：上传图片时请求实体太大

Question

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:

PayloadTooLargeError: request entity too large

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):

<template>
  <div class="profile">
          <div class="px-4">
            <div class="row justify-content-center">
              <div class="col-lg-3 order-lg-2">
                <div class="card-profile-image image-preview">
                  <div v-if="profImage !=undefined && profImage.length > 0">
                  <a>
                    <img
                      :src="profImage"
                      class="rounded-circle"
                    />
                  </a>
                  </div>
                  <div>
                    <div class="file-upload-form">
                      Upload image:
                      <input
                        type="file"
                        @change="previewImage"
                        accept="image/*"
                      />
                    </div>
                    <div class="image-preview" v-if="imageData.length > 0">
                      <img class="preview" :src="imageData" />
                      <button @click="updateUserImage"></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
      </div>
  </div>
</template>

Here my js file:

<script>
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 && input.files[0]) {
        var reader = new FileReader()
        reader.onload = e => {
          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() {}
}
</script>

When I try to use "JSON.parse(userInfo.data.user[0].profImage)"I get an error :

"Unexpected token d in JSON at position 0"

I also try with JSON.Stringify, but I get is not a function.

In my db, the image is saved in this way:

  profImage: {
    image: Buffer,
    require: false
  },

What am I doing wrong? I am using mongodb, vue , express and node.

Answer 1

我使用bodyParser.json({ limit: "50mb" })更改解析器限制并为我工作