如何使用 base64 图像发送 POST 请求？

Question

我正在用vue js制作一个图片上传组件，并带有自定义裁剪选项。裁剪后的版本以base64字符串的形式保存在我的状态中。这是它：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6VAAAgAElEQVR4Xu2dCdh+1dT/v3+UDA1KMiQhlCEylDGZSqbI0Jy8JMmYUEloRFIpVJK5EpL0ilJmr6IQKiXzrCKESP2v72vfb8/z/O7hnH2fc/be53z2df2uoj1+9vrd6+y1117r/4kCAQhAAAIQgEDnBP5f5yMyIAQgAAEIQAACQgEjBBCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAA....

现在我正在尝试使用post请求API将这个图像发送到我的node.js服务器。在Postman中，我正在编写body选择"raw"和"json"，并以如下的方式编写body：

{
        "image" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6VAAAgAElEQVR4Xu2dCdh+1dT/v3+UDA1KMiQhlCEylDGZSqbI0Jy8JMmYUEloRFIpVJK5EpL0ilJmr6IQKiXzrCKESP2v72vfb8/z/O7hnH2fc/be53z2df2uoj1+9vrd6+y1117r/4kCAQhAAAIQgEDnBP5f5yMyIAQgAAEIQAACQgEjBBCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCAAAQgAIEEBFDACaAzJAQgAAEIQAAFjAxAAAIQgAAEEhBAASeAzpAQgAAEIAABFDAyAAEIQAACEEhAAAWcADpDQgACEIAABFDAyAAEIAABCEAgAQEUcALoDAkBCEAAAhBAASMDEIAABCAAgQQEUMAJoDMkBCAAAQhAAAWMDEAAAhCAAAQSEEABJ4DOkBCAAAQgAAEUMDIAAQhAAAIQSEAABZwAOkNCAAIQgAAEUMDIAAQgAAEIQCABARRwAugMCQEIQAACEEABIwMQgAAEIACBBARQwAmgMyQEIAABCEAABYwMQAACEIAABBIQQAEngM6QEIAABCAAARQwMgABCEAAAhBIQAAFnAA6Q0IAAhCAAARQwMgABCAAAQhAIAEBFHAC6AwJAQhAAAIQQAEjAxCA.....
}

请求未检测到请求体中的 JSON 数据并返回错误：

{
    "image": "\"image\" is required"
}

我也尝试过以这种方式发送表单数据：

var axios = require('axios');
      var FormData = require('form-data');
      // var fs = require('fs');
      var data = new FormData();
      data.append('image', formdata.logoFinalImage);

      var config = {
        method: 'post',
        url: myurl,
        headers: {
          'Authorization': this.state.token,
          'Content-Type': 'application/json'
        },
        data: data
      };

      axios(config)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .catch(function (error) {
          console.log(error);
        });

同样的问题。 我如何将最终裁剪版本发送到节点API端点？

- adeab

---

我认为你没有创建一个base64 URL，而只是元数据。你可以查看这个链接：https://stackoverflow.com/questions/26360403/uploading-a-base64-encoded-image-to-node-js-server-not-working - Apoorva Chikara

你能否添加Postman截图，展示你是如何添加它的？并且你的产品是否接受表单或JSON格式的数据？ - PDHide

@PDHide JSON请求体。这是截图：https://ibb.co/g4bTDMp - adeab

@ApoorvaChikara 我正在使用这个字符串在我的Vue.js前端预览图像。而这个字符串是通过使用readAsDataURL(file)函数生成的。还有其他需要做的事情来使它成为base64吗？ - adeab

你能在Postman中使其工作吗？ - PDHide

Answer 1

解决了问题。有两种方法可以做到这一点。一种是在后端进行必要的更改，以便配置代码以接收base64并将其转换为图像。参考：https://medium.com/js-dojo/how-to-upload-base64-images-in-vue-nodejs-4e89635daebc 另一种方法是创建base64图像文件，然后将其作为表单数据发送到后端。对于我的情况，使用了这个方法。此解决方案的参考：https://gist.github.com/ibreathebsb/a104a9297d5df4c8ae944a4ed149bcf1

- adeab

Answer 2

如果在Postman中工作正常，那么您可以直接从Postman创建代码，选择代码并搜索axios。

v8<

如果使用v8

- PDHide

---

是的，我可以做到。但问题在于，由于我在前端以base64格式生成图像，因此我需要发送base64字符串而不是您发送的图像文件。这样做并不起作用。那就是问题所在。 - adeab