從Angular上傳base64圖片到服務器

Question

我正在嘗試將 base64 圖片從 Angular 上傳到 ExpressJS。 我正在使用 html2canvas 創建 base64 圖像。 如果我嘗試以當前形式上傳imageData ，我會得到imageData.replace is not a function 。 如果我嘗試在 angular 服務中像這樣對其進行字符串化

const image = JSON.stringify(imageData);
const data = image.replace(/^data:image\/\w+;base64,/, '');

然后我得到Buffer is not a constructor如何讓它成功上傳到 ExpressJS 服務器？ 感謝您的幫助！

成分

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

服務

    uploadImage(contentType, imageData) {
        console.log("imageData", imageData)
        const headers = new HttpHeaders();
        if (contentType === 'jpeg') {
            headers.set('Content-Type', 'image/jpeg;');
        } else if (contentType === 'png') {
            headers.set('Content-Type', 'image/jpeg;');
        }

        const data = imageData.replace(/^data:image\/\w+;base64,/, '');
        const buff = new Buffer(imageData, 'base64');
        return this.http.put(
            environment.slsLocal + '/update-image-url',
            buff.buffer,
            { headers: headers }
        );
    }

服務中的 console.log('imageData', imageData) 看起來像這樣

Answer 1

你有 2 個問題。

1. html2canvas(table).then .then 返回 promise。不是res 。 你必須在html2canvas(table).then中調用this.angularService 。

2. 我不確定你想用const buff = new Buffer(imageData, 'base64');做什么 . 如果要上傳 base64 的內容，只需將data 。

另請注意，您必須subscribe this.http.put的返回，因為除非訂閱，否則 HTTP 請求不會拋出到您的服務器。

把它放在一起。

成分

ngAfterViewInit() {
    sleep(5000).then(() => {
        const table = document.getElementById('table');
        html2canvas(table).then(function (canvas) {
            const res = canvas.toDataURL();
            this.dataUrl = res;
            this.angularService.uploadImage('png', this.dataUrl)
                .subscribe( result => {
                  // your logic
                } );
        });
    });
}

服務

uploadImage(contentType, imageData) {
    console.log("imageData", imageData)
    const headers = new HttpHeaders();
    if (contentType === 'jpeg') {
        headers.set('Content-Type', 'image/jpeg;');
    } else if (contentType === 'png') {
        headers.set('Content-Type', 'image/jpeg;');
    }

    const data = imageData.replace(/^data:image\/\w+;base64,/, '');
    return this.http.put(
        environment.slsLocal + '/update-image-url',
        data,
        { headers: headers }
    );
}