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" }) 为我工作

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

1 个答案: