홈>2020-02-26 08:15

mysql)

Helloku에서 Node.js 및 AngularJs를 사용하여 웹 사이트를 호스팅하고 있지만 데이터베이스가 다른 곳에 있습니다 (예 : abc.com).

abc.com의 mysql 데이터베이스에 이미지를 저장하고 싶습니다 (헤 로쿠에 이미지를 저장하지 않음).

ng, file-upload (npm 모듈)를 사용하여 AngularJ의 이미지를 저장하기 위해 text, blob, longblob 데이터 유형을 사용했습니다. 이미지를 업로드하면 데이터베이스에 저장됩니다.

데이터베이스 값을 가져오고 node.js에서 휴식을 취하기 위해 abc.com에 휴식 API를 만들었습니다.

이제 데이터베이스에서 이미지를 가져 와서 html 페이지에 표시하고 싶습니다. mysql->abc.com->node.js->angularjs에서 데이터베이스 값을 가져 와서 angular-base64, atob 및 btoa를 사용하여 데이터베이스 값을 이미지로 변환하여 이미지를 표시했지만 운이 없었습니다.

let _arrayBufferToBase64 = function (buffer) {
    return $base64.encode(buffer);
};
let _arrayBufferToBase64 = function (buffer) {
    console.log('_arrayBufferToBase64')
    var binary = '';
    var bytes = new Uint8Array(new Buffer(buffer, 'base64'));
    // var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    console.log(len);
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
};
UtilService.fetchImage()
    .then(function(res){
        console.log(res);
        if(res.success){
            let data = res.data[0].profile_pic;
            console.log(data);
            $scope.img = 'data:image/png;base64,'+_arrayBufferToBase64(data);
            // $scope.img = 'data:image/png;base64,'+data;
            console.log($scope.img);
        } else {
            console.log('image not found');
            $scope.alt = "Image is not found";
        }
    })
}
template: '<img class="img-responsive img-hover" ng-src={{img}} alt={{alt}}"/>'

데이터베이스가 heroku에있을 때 위의 코드는 정상적으로 작동했습니다. 하지만 지금은 도움이 필요합니다.

미리 감사합니다 ...

angularjsnode.js

답변 # 1

내 질문에 대한 해결책을 찾았으며 다른 사람들과 공유하고 싶습니다.

내 요구 사항은 angularjs에서 nodejs로, nodejs에서 abc.com (내 데이터베이스가있는 곳)으로 이미지를 전송하는 것이 었습니다.

angularjs에서ng-file-upload를 다음과 같이 사용했습니다 :

<div class="col-sm-12">
    <button class="col button btn btn-primary btn-sm" ng-model="$ctrl.imageFile" id="imageFile" name="imageFile" ngf-pattern="'image/*'" ngf-select ngf-accept="'image/*'" ngf-max-size="2MB" ngf-resize="{width: 512, height: 512, quality: 1}">Select/Change</button>
    <p class="text-danger text-center" ng-show="profileImageForm.imageFile.$error.maxSize">
        2MB is max size
    </p>
    <p class="text-danger text-center" ng-show="profileImageForm.imageFile.$error.pattern">
        Select image
    </p>
    <button ng-show="!!$ctrl.imageFile" class="col btn btn-primary btn-sm" ng-click="$ctrl.uploadProfilePic($ctrl.imageFile)">Upload</button>
</div>

Upload.upload({
    // request method is post
    url: 'server-url',
    data: { imageFile: $ctrl.imageFile },
    headers: Utility.authHeader
}).then(function (resp) {
    // ...
})

서버 측 (NodeJ) :

app.post('server-url', , function (req, res) {
    const formidable = require('formidable');
    const form = new formidable.IncomingForm();
    const base64Img = require('base64-img');
    form.encoding = 'utf-8';
    form.parse(req, function (err, fields, file) {
        logger.debug(file);
        if (!!file.imageFile && !!file.imageFile.path) {
            const uploadedImagePath = file.imageFile.path      // imageFile is form param name
            logger.debug(uploadedImagePath);        // image will be stored in temp folder on server
            // convert image to base64 encoded string
            base64Img.base64(uploadedImagePath, function (err, base64String) {
                logger.debug(base64String);
                // send base64String to abc.com and store in database
            });
        } else {
            logger.debug("Image path is not available");
            res.json({ success: false })
        }
    });
})

저장된 이미지를 표시하려는 경우 : 데이터베이스에서 base64String을 가져오고 이미지 인 것처럼 사용하십시오.

Utility.fetchImage()
    .then(function(res){
        $ctrl.img = res.data;
    })
<img class="img-responsive img-hover" ng-src={{img}} />

도움이 되길 바랍니다. 다른 대안도 기꺼이 알고 싶습니다.

Python2.net

AngularJS에서 MySQL 이미지를 표시하는 방법은 무엇입니까? (AngularJs-> Nodejs-> abccom-> mysql)

관련 자료