حل مشكلة كتابة الملف في قاعدة البيانات باستخدام buffer

Samer Alashqar · 15 مارس 2022

السلام عليكم..

عند حفظي للصورة باستخدام buffer يظهر هذا الخطأ :

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
    at Function.from (buffer.js:330:9)

تحويل الصورة الى base64 :

$('#add-product').submit(function(e) {
    e.preventDefault()


    var image =  $("#img").get(0);
    
      var img = image.files[0];
      var reader = new FileReader();
      reader.onloadend = function() {
      reader.result.split(',')[1]
    }
      reader.readAsDataURL(img);
    
      $.ajax({
        type: 'POST',
        url: `${serverAddress}/product/add`,
        cache: false,
    contentType: false,
    processData: false,
    data: reader, 
        success: (res) => {
          alert('success');
        },
        error: (er) => {
          alert('err');
          }
          })
  
  })

كتابة الملف :

const fs = require('fs');
const path = require('path');

exports.write = (base64String, fileName) => {
    var buffer =   Buffer.from(base64String, 'base64');
    fs.writeFile(`${__dirname}/images/${fileName}.jpg`, buffer, (error) => {
        if(error) {
            console.log(error)
        }
    });

    // الملف الذي تخزن فيه الصور
    return `/images/${fileName}.jpg`;
}

شكرا .

Hassan Hedr · 15 مارس 2022

بتاريخ 5 دقائق مضت قال Samer Alashqar:

نتيجة ال log


/9j/4RWURXhpZgAASUkqAAgAAAAMAAABAwABAAAAgAcAAAEBAwABAAAAgAcAAAIBAwADAAAAngAAAAYBAwABAAAAAgAAABIB

طبعا السلسة النصية اطول من هذا لكن جلبت اول سطر منها فقط

استدعاء التابع write :


exports.addProduct = (req,res) => {
    const {proName, proQuantity, proPrice, proDisPrice, proDescription, proPromoName, proClassification} = req.body;

    const product = new Product ({
        proName, 
        proQuantity, 
        proPrice, 
        proDisPrice, 
        proDescription, 
        proPromoName,
        proClassification,
    });

    

    const imagePath = fileWriter.write(req.body.proImg, product._id) ;
    product.proImg = imagePath;


    product.save().then(product => {
        res.status(201).send();
    }).catch(error => {
        console.log(error)
        res.status(500).send();
    });
}

قيمة جسم الطلب المرسل إلى addProduct هي فقط نص الصورة على شكل base64، يجب إرسال باقي البيانات مع أسماءها الصحيحة ضمن الطلب بطرف العميل ووضع قيمة الصورة ضمن proImg ليتم استخراجها بشكل صحيح كالتالي:

$.ajax({
  type: 'POST',
  url: `${serverAddress}/product/add`,
  ...
  data: {
    proName: ...,
    proQuantity: ...,
    ...
    proImg: imageBase64
  },
})

Hassan Hedr · 15 مارس 2022

يوجد خطأ في استخدام التابع write حيث يتم تمرير له قيمة base64String غير معرفة، السبب ضمن طرف العميل عليك تخزين الناتج من التحويل ضمن متغير ثم تمريره مع الطلب وليس تمرير reader مباشرة، يمكن حل المشكلة بتعديل الشيفرة كالتالي:

let imageBase64 = null;
var reader = new FileReader();
reader.onloadend = function() {
  imageBase64 = reader.result.split(',')[1];
  ^^^^^^^^^^^^^
}

//...

$.ajax({
  ...
  data: imageBase64, 
  ...   ^^^^^^^^^^^
})

})

Samer Alashqar · 15 مارس 2022

بتاريخ 44 دقائق مضت قال Hassan Hedr:
يوجد خطأ في استخدام التابع write حيث يتم تمرير له قيمة base64String غير معرفة، السبب ضمن طرف العميل عليك تخزين الناتج من التحويل ضمن متغير ثم تمريره مع الطلب وليس تمرير reader مباشرة، يمكن حل المشكلة بتعديل الشيفرة كالتالي:
let imageBase64 = null;
var reader = new FileReader();
reader.onloadend = function() {
  imageBase64 = reader.result.split(',')[1];
  ^^^^^^^^^^^^^
}

//...

$.ajax({
  ...
  data: imageBase64, 
  ...   ^^^^^^^^^^^
})

})

ايضا لم تحل ..

$('#add-product').submit(function(e) {
    e.preventDefault()


    var image =  $("#img").get(0);
    
      var img = image.files[0];
      let imageBase64 = null;
      var reader = new FileReader();
      reader.onloadend = function() {
        imageBase64 = reader.result.split(',')[1]
    }
      reader.readAsDataURL(img);
    
      $.ajax({
        type: 'POST',
        url: `${serverAddress}/product/add`,
        cache: false,
    contentType: false,
    processData: false,
    data: imageBase64, 
        success: (res) => {
          alert('success');
        },
        error: (er) => {
          alert('err');
          }
          })
  
  })

Hassan Hedr · 15 مارس 2022

بتاريخ الآن قال Samer Alashqar:

ايضا لم تحل ..


$('#add-product').submit(function(e) {
    e.preventDefault()


    var image =  $("#img").get(0);
    
      var img = image.files[0];
      let imageBase64 = null;
      var reader = new FileReader();
      reader.onloadend = function() {
        imageBase64 = reader.result.split(',')[1]
    }
      reader.readAsDataURL(img);
    
      $.ajax({
        type: 'POST',
        url: `${serverAddress}/product/add`,
        cache: false,
    contentType: false,
    processData: false,
    data: imageBase64, 
        success: (res) => {
          alert('success');
        },
        error: (er) => {
          alert('err');
          }
          })
  
  })

قم بعمل log لقيمة imageBase64 قبل إرسال الطلب وتأكد أنها معرفة بشكل صحيح كالتالي:

reader.readAsDataURL(img);

console.log(imageBase64);

$.ajax({
  type: 'POST',
  ...

أيضًا تأكد من طريقة استدعائك للتابع write وأنك تقوم باستخراج جسم الطلب الوراد وتمريره بشكل صحيح إليه كمعامل أول، يرجى إرفاق كيفية الاستدعاء في حال لم تستطع حل المشكلة

Samer Alashqar · 15 مارس 2022

بتاريخ 18 دقائق مضت قال Hassan Hedr:
قم بعمل log لقيمة imageBase64 قبل إرسال الطلب وتأكد أنها معرفة بشكل صحيح كالتالي:
reader.readAsDataURL(img);

console.log(imageBase64);

$.ajax({
  type: 'POST',
  ...
أيضًا تأكد من طريقة استدعائك للتابع write وأنك تقوم باستخراج جسم الطلب الوراد وتمريره بشكل صحيح إليه كمعامل أول، يرجى إرفاق كيفية الاستدعاء في حال لم تستطع حل المشكلة

نتيجة ال log

/9j/4RWURXhpZgAASUkqAAgAAAAMAAABAwABAAAAgAcAAAEBAwABAAAAgAcAAAIBAwADAAAAngAAAAYBAwABAAAAAgAAABIB

طبعا السلسة النصية اطول من هذا لكن جلبت اول سطر منها فقط

استدعاء التابع write :

exports.addProduct = (req,res) => {
    const {proName, proQuantity, proPrice, proDisPrice, proDescription, proPromoName, proClassification} = req.body;

    const product = new Product ({
        proName, 
        proQuantity, 
        proPrice, 
        proDisPrice, 
        proDescription, 
        proPromoName,
        proClassification,
    });

    

    const imagePath = fileWriter.write(req.body.proImg, product._id) ;
    product.proImg = imagePath;


    product.save().then(product => {
        res.status(201).send();
    }).catch(error => {
        console.log(error)
        res.status(500).send();
    });
}

حل مشكلة كتابة الملف في قاعدة البيانات باستخدام buffer

السؤال

Samer Alashqar

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Samer Alashqar

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Samer Alashqar

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية