将图像从角度上传到nodejs时出错

Question

我的Html file 是 -

<form method="post" [formGroup]="orderForm" enctype="multipart/form-data" (ngSubmit)="OnSubmit(orderForm.value)" >
      <div class="form-group">
        <label for="image">Select Branch Image</label>
        <input type="file" formControlName="branchImg" (change)="onFileChange($event)" class="form-control-file" id="image">
      </div>
</form>

而我的.ts file 是-

public orderForm: FormGroup;

onFileChange(event) {
    const reader = new FileReader();

    if (event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

      reader.onload = () => {
        this.orderForm.patchValue({
          branchImg: reader.result
        });               
      };
    }
  }

ngOnInit() {
    this.orderForm = this.formBuilder.group({
      branchImg: [null, Validators.required]
    });
  }

然后提交表单。

我应该在cloudinary获取图片地址并上传该地址

但是当我在我的 nodejs 应用程序中安慰身体时

它给出了这样的东西-

branchImg: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QCEUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAGccAigAYkZCTUQwMTAwMGE4MjBkMDAwMD and so on.

我不认为这是图像地址。谁能告诉我这是什么？以及如何获取我将上传到 cloudinary 的图片地址

正如 Eric 建议的那样 -

我的 app.js 代码是

router.post('/branch',(req,res) =>{
    const body = req.body;
      const base64Data = body.branchImg.replace(/^data:image\/png;base64,/, "");
      console.log(base64Data);
      fs.writeFile("out.jpg", base64Data, 'base64', function(err,result) {
        console.log(result);
      });
 });

它给出result 为undefined

Answer 1

这基本上是图像数据的base64编码。得到之后你需要做的就是将它写入一个文件，然后将它上传到 cloudinary

//this will write the base64 data as a jpg file to your local disk
require("fs").writeFile("out.jpg", base64Data, 'base64', function(err) {
    //after you write it to disk, use the callback space here to upload said file
    //to your cloudinary endpoint
});