Не удалось декодировать base64 при загрузке изображения (размер: 1 МБ или выше)

#javascript #node.js #mongodb #cloudinary

Вопрос:

Я использую cloudinary для загрузки и хранения изображений в моем проекте. Я пытаюсь загрузить изображение размером 1 МБ, но появляется сообщение об ошибке «Не удалось декодировать base64». Но если оно меньше 750 КБ, эта ошибка не выдается. Кто-нибудь знает, как это исправить?

  if(req.body.avatar !== '') {
        const user = await User.findById(req.user.id);

        const image_id = user.avatar.public_id;

        const res = await cloudinary.v2.uploader.destroy(image_id)

        const result = await cloudinary.v2.uploader.upload(req.body.avatar, {
            folder: 'avatars',
            width: 300,
            crop: "scale"
        })

        newUserData.avatar = {
            public_id: result.public_id,
            url: result.secure_url
        }

1. Откуда берется req.body.avatar? Вы уверены, что это допустимый файл в кодировке Base64? Cloudinary поддерживает отправку файлов размером до 60 МБ в виде строки в кодировке base64, поэтому, если это не удается, может быть что-то еще, из-за чего большие файлы будут обрезаны или неправильно закодированы перед отправкой в API Cloudinary

2. @Igy Я могу успешно загружать изображения размером менее 750 КБ в свой веб-проект, и он сохраняет загруженное изображение в cloudinary. Я не уверен, почему он терпит неудачу всякий раз, когда я загружаю изображение большего размера

3. @Igy также req.body.avatar берется из изображения, загруженного во внешнем интерфейсе.

4. Должна быть какая-то разница между значением req.body.avatar при загрузке меньшего файла в Cloudinary и большего; из того, что вы сказали, я предполагаю, что это связано с тем, как данные были переданы на ваш сервер, но, конечно, можно загружать такие файлы в Cloudinary черезлибо кодировка base64, либо стандартная загрузка байтов файла в виде нескольких частей

5. @Igy это код в нашем интерфейсе при получении изображений, я не уверен, что проблема все еще в интерфейсной части const reader = new FileReader(); reader.onload = () => { if(reader.readyState === 2){ setAvatarPreview(reader.result) setAvatar(reader.result) } } reader.readAsDataURL(e.target.files[0])

Ответ №1:

Я столкнулся с той же проблемой. Просто отправьте файл bas64 как json, а не как FormData . шаг 1 : app.use(express.json({ limit: "50mb" })); app.use(express.urlencoded({ limit: "50mb", extended: true }));

шаг 2: поскольку вы конвертируете изображение при событии onChange, файл преобразуется в base64. поэтому просто отправьте эти данные в формате json.