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
});

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

1 个答案: