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

Question

我正在尝试将 base64 格式的图像上传/保存到我的 mongo 数据库。 如果我使用非常小的图像，它可以工作，但我尝试使用 161 kb 的图像，我有这个错误：

PayloadTooLargeError: 请求实体太大

所以我尝试使用 Json 转换我的图像，但出现错误或者它不起作用， 她是我的代码（我正在使用 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>

这里是我的 js 文件：

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

当我尝试使用“JSON.parse(userInfo.data.user[0].profImage)”时出现错误：

“JSON 中位置 0 的意外标记 d”

我也尝试使用 JSON.Stringify，但我得到的不是函数。

在我的数据库中，图像是这样保存的：

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

我做错了什么？我正在使用 mongodb、vue、express 和 node。

Answer 1

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