通过 ajax 将图像发送到 multer

Question

I'm using Multer to upload an image file into my node server, and it always comes back to giving me undefined for using ajax to send the image.

Ajax:

image = $("#input-file-img").val()
                const data = new FormData();
                 data.append("image", image);
                 $.ajax({
                    url: '/uploadfile/' + userName,
                    method: 'POST',
                    async: false,
                    processData: false ,
                    contentType: false,
                    data: data
                })

Upload.js

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
})
var upload = multer({ storage: storage })

router.post('/uploadfile/:userName', upload.single('image'), async (req, res, next) => {
  let user = await User.findOne({ userName: req.params.userName })
  let file = req.file
  let fileName = file.filename
  let path = variables.kepler + 'uploads/' + fileName
  user.image = path
  await user.save()
  if (!path) {
    const error = new Error('Please upload a file ...')
    error.httpStatusCode = 400
    return next(error)
  }

  if (path) {
    return res.status(200).send({
      status: '200',
      message: 'Operation completed successfully ...',
      data: user,
      path
    })
  }
})

I checked the image value with console and it shows C:\fakepath\Capture d'écran de 2019-09-19 11-33-59.png'

Would appreciate any help.

Answer 1

I think your server side code is fine, if I modify the client side code as below, everything works nicely, we end up with images in the /uploads folder:

function base64toBlob(base64, mimeType) {
    const bytes = atob(base64.split(',')[1]);
    const arrayBuffer = new ArrayBuffer(bytes.length);
    const uintArray = new Uint8Array(arrayBuffer);
    for (let i = 0; i < bytes.length; i++) {
        uintArray[i] = bytes.charCodeAt(i);
    }
    return new Blob([ arrayBuffer ], { type: mimeType });
}

function submitForm() {         
    const imgRegEx = /^data:(image\/(gif|png|jpg|jpeg))/;
    const imageData = $('#input-file-img').attr('src');
    const mimeType = imgRegEx.exec(imageData)[1];
    const blob = base64toBlob(imageData, mimeType);

    const fileExt = mimeType.replace("image/", "");
    const fileName = "test-image." + fileExt; // Change as appropriate..

    const data = new FormData();
    data.append("image", blob, fileName);

    $.ajax({
        url: '/uploadfile/' + userName,
        method: 'POST',
        async: false,
        processData: false ,
        contentType: false,
        data: data
    })
}

Answer 2

Solved!!!

getting value by

image = $("#input-file-img").val()

that means I was sending a type String as a file

so I had to change it to

image = $('#input-file-img')[0].files[0]

and everything works really well