Angular上传Base64图片至ExpressJS遇报错，求可行解决方案

核心错误原因 #

你遇到的两个错误根源分别是：

1. html2canvas返回的是Promise对象，你直接把Promise传给服务，导致服务里调用imageData.replace时，因为Promise没有这个方法而报错；
2. 服务中使用了已弃用的new Buffer()，且存在HttpHeaders赋值错误、Content-Type设置错误的问题。

1. 修复组件代码：等待异步操作完成再上传 #

必须等html2canvas的Promise resolve后，拿到实际的base64字符串再调用上传方法，两种实现方式任选：

方式一：使用async/await

ngAfterViewInit() {
    sleep(5000).then(async () => {
        const table = document.getElementById('table');
        // 等待canvas生成完成
        const canvas = await html2canvas(table);
        const dataUrl = canvas.toDataURL();
        this.angularService.uploadImage('png', dataUrl);
    });
}

方式二：使用then链式调用

ngAfterViewInit() {
    sleep(5000).then(() => {
        const table = document.getElementById('table');
        html2canvas(table).then(canvas => {
            const dataUrl = canvas.toDataURL();
            this.angularService.uploadImage('png', dataUrl);
        });
    });
}

2. 修复服务代码：修正Buffer用法与请求配置 #

uploadImage(contentType: string, imageData: string) {
    console.log("imageData", imageData);
    // HttpHeaders是不可变对象，修改后需重新赋值
    let headers = new HttpHeaders();
    // 修正Content-Type配置：png对应image/png
    if (contentType === 'jpeg') {
        headers = headers.set('Content-Type', 'image/jpeg');
    } else if (contentType === 'png') {
        headers = headers.set('Content-Type', 'image/png');
    }

    // 去除base64前缀，只保留纯编码内容
    const base64Data = imageData.replace(/^data:image\/\w+;base64,/, '');
    // 用Buffer.from替代已弃用的new Buffer()
    const buff = Buffer.from(base64Data, 'base64');

    return this.http.put(
        environment.slsLocal + '/update-image-url',
        buff, // 直接传Buffer即可，无需buff.buffer
        { headers: headers }
    );
}

可选：后端期望FormData时的上传方式 #

如果你的Express后端需要接收FormData格式的文件，可以修改服务代码为：

uploadImage(contentType: string, imageData: string) {
    const base64Data = imageData.replace(/^data:image\/\w+;base64,/, '');
    const buff = Buffer.from(base64Data, 'base64');
    
    const formData = new FormData();
    formData.append('image', buff, {
        filename: `image.${contentType}`,
        contentType: contentType === 'jpeg' ? 'image/jpeg' : 'image/png'
    });

    return this.http.put(
        environment.slsLocal + '/update-image-url',
        formData
    );
}

内容的提问来源于stack exchange，提问作者user6680