加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 如何使用均值js将图像文件上传到mongoose数据库

发布时间:2020-12-17 09:41:02 所属栏目:安全 来源:网络整理
导读:我是新的平均堆叠.我想知道如何通过 angularjs将图像文件上传到数据库(mongoose).如有可能,请提供一些代码.我已经搜索互联网,但我没有找到任何合适的代码. 你有很多方法和工具来实现你想要的.我把其中一个放在这里: 对于这个我使用angular-file-upload作为
我是新的平均堆叠.我想知道如何通过 angularjs将图像文件上传到数据库(mongoose).如有可能,请提供一些代码.我已经搜索互联网,但我没有找到任何合适的代码.
你有很多方法和工具来实现你想要的.我把其中一个放在这里:

对于这个我使用angular-file-upload作为客户端.所以你需要这个控制器中的一个:

$scope.onFileSelect = function(image) {
            if (angular.isArray(image)) {
                image = image[0];
            }

            // This is how I handle file types in client side
            if (image.type !== 'image/png' && image.type !== 'image/jpeg') {
                alert('Only PNG and JPEG are accepted.');
                return;
            }

            $scope.uploadInProgress = true;
            $scope.uploadProgress = 0;

            $scope.upload = $upload.upload({
                url: '/upload/image',method: 'POST',file: image
            }).progress(function(event) {
                $scope.uploadProgress = Math.floor(event.loaded / event.total);
                $scope.$apply();
            }).success(function(data,status,headers,config) {
                $scope.uploadInProgress = false;
                // If you need uploaded file immediately 
                $scope.uploadedImage = JSON.parse(data);      
            }).error(function(err) {
                $scope.uploadInProgress = false;
                console.log('Error uploading file: ' + err.message || err);
            });
        };

并在您的视图中的以下代码(我还添加了现代浏览器的文件类型处理程序):

Upload image <input type="file" data-ng-file-select="onFileSelect($files)" accept="image/png,image/jpeg">
<span data-ng-if="uploadInProgress">Upload progress: {{ uploadProgress }}</span>
<img data-ng-src="uploadedImage" data-ng-if="uploadedImage">

对于服务器端,我使用node-multiparty.

这就是您在服务器端路由中需要的:

app.route('/upload/image')
    .post(upload.postImage);

并在服务器端控制器中:

var uuid = require('node-uuid'),multiparty = require('multiparty'),fs = require('fs');

exports.postImage = function(req,res) {
    var form = new multiparty.Form();
    form.parse(req,function(err,fields,files) {
        var file = files.file[0];
        var contentType = file.headers['content-type'];
        var tmpPath = file.path;
        var extIndex = tmpPath.lastIndexOf('.');
        var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex);
        // uuid is for generating unique filenames. 
        var fileName = uuid.v4() + extension;
        var destPath = 'path/to/where/you/want/to/store/your/files/' + fileName;

        // Server side file type checker.
        if (contentType !== 'image/png' && contentType !== 'image/jpeg') {
            fs.unlink(tmpPath);
            return res.status(400).send('Unsupported file type.');
        }

        fs.rename(tmpPath,destPath,function(err) {
            if (err) {
                return res.status(400).send('Image is not saved:');
            }
            return res.json(destPath);
        });
    });
};

正如你所看到的,我将上传的文件存储在文件系统中,所以我只是使用node-uuid给他们唯一的名字.如果要将文件直接存储在数据库中,则不需要uuid,在这种情况下,只需使用缓冲区数据类型.还请照顾像角度模块依赖关系中添加angularFileUpload这样的东西.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读