首页 > 解决方案 > 获取将图片上传为base64而不是文件

问题描述

我创建了一个端点来使用我的 nodeJS API 上传头像。

当我从 POSTMAN 使用端点时,端点工作正常。

但是当我从我的 react-js 应用程序中使用 Fetch 调用它时它不起作用。

当我使用 Fetch 调用端点时, busboy.on('file', () = {...}) 似乎没有被触发。

我的 react-js 应用程序中的 fetch 方法:

export const fetchPostFile = async (url, file) => {

  try {

    const data = new FormData();
    data.append("image", file);
    
    const rawResponse = await fetch(url, {
      method: 'POST',
      body: data
    });

    return await rawResponse.json();

  } catch (error) {

    console.error(error);
    return {success: false, message: 'query_can_not_be_sent'};

  }

}

reactjs发送的输入formData:

------WebKitFormBoundary5WI3GuEx81A7nLq0
Content-Disposition: form-data; name="image"

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/7QL6UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAt0cAQAAAgACHAEUAAIAARwBFgACAAIcAR4ACUFGUC1QSE9UTxwBKAAIMTIzNDU2NzgcATwAATUcAUYACDIwMjAxMDExHAFQAAsxNTU5MjcrMDAwMBwBWgADGy1BHAFkAApBRlBfOFJWOUFQHAIAAAIAAhwCBQAZVEVOTklTLUZSQS1PUEVOLU1F...

上传头像的api方法

exports.postAvatar = async (request, response) => {

  response.set('Access-Control-Allow-Origin', '*');
  response.set('Access-Control-Allow-Headers', '*');

  const BusBoy = require('busboy');
  const fs = require('fs');
  const os = require('os');
  const path = require('path');

  const busboy = new BusBoy({ headers: request.headers });
  
  busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
    console.log('busboy.on(file)');
  });

  busboy.on('finish', async () => {
    console.log('busboy.on(finish)');
  });

  busboy.end(request.rawBody);

  return response.json({message: 'ok'});

}

busboy.on(file)当我从 reactjs 调用时不显示消息,但通过邮递员调用显示。

编辑:

我检查了 POSTMAN 输入,图像不是作为 base64 发送的,而是这样:

邮递员身体

在 Postman 中,我尝试在输入的字段文本中使用 base64 图片,结果与 Fetch 相同。

busboy 可以接收 base64 编码的图像吗?或者我可以将base64图片转换为文件输入吗?

标签: javascriptfetchbusboy

解决方案


推荐阅读