zoukankan      html  css  js  c++  java
  • NodeJS-图片上传(Express)

    文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。

    页面样式

    Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片:

    上传图片样式:

                                <div class="upload-container">
                                    <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />
                                </div>

    CSS样式:

            .upload-container {
                background-image: url(../../images/rv/add.jpg);
                background-repeat: no-repeat;
                 180px;
                height: 200px;
                padding-bottom: 10px;
                display: inline-block;
                vertical-align: middle;
                .fileupload {
                    opacity: 0;
                    filter: alpha(opacity=0);
                     200px;
                    height: 200px;
                }
            }
    

    Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现:

        $('.fileupload').change(function(event) {
            /* Act on the event */
            if ($('.fileupload').val().length) {
                var fileName = $('.fileupload').val();
                var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
                if (extension == ".jpg" || extension == ".png") {
                        var data = new FormData();
                        data.append('upload', $('#fileToUpload')[0].files[0]);
                        $.ajax({
                            url: 'apply/upload',
                            type: 'POST',
                            data: data,
                            cache: false,
                            contentType: false, //不可缺参数
                            processData: false, //不可缺参数
                            success: function(data) {
                                console.log(data);
                            },
                            error: function() {
                                console.log('error');
                            }
                        });
                } 
            }
        });
    

    服务端保存

    NodeJS服务端保存需要使用了第三方插件node-formidable,npm安装地址:

    npm install formidable@latest
    

    上传图片

    var cacheFolder = 'public/images/uploadcache/';
    exports.upload = function(req, res) { var currentUser = req.session.user; var userDirPath =cacheFolder+ currentUser.id; if (!fs.existsSync(userDirPath)) { fs.mkdirSync(userDirPath); } var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = 'utf-8'; //设置编辑 form.uploadDir = userDirPath; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 form.type = true; var displayUrl; form.parse(req, function(err, fields, files) { if (err) { res.send(err); return; } var extName = ''; //后缀名 switch (files.upload.type) { case 'image/pjpeg': extName = 'jpg'; break; case 'image/jpeg': extName = 'jpg'; break; case 'image/png': extName = 'png'; break; case 'image/x-png': extName = 'png'; break; } if (extName.length === 0) { res.send({ code: 202, msg: '只支持png和jpg格式图片' }); return; } else { var avatarName = '/' + Date.now() + '.' + extName; var newPath = form.uploadDir + avatarName; displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName; fs.renameSync(files.upload.path, newPath); //重命名 res.send({ code: 200, msg: displayUrl }); } }); };

    不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:https://github.com/broofa/node-uuid

    文件重命名:

       fs.renameSync(files.upload.path, newPath); //重命名
    

    文件上传进度:

    form.on('progress', function(bytesReceived, bytesExpected) {
    });
    

    node-formidable有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~

  • 相关阅读:
    解释机器学习模型的一些方法(一)——数据可视化
    机器学习模型解释工具-Lime
    Hive SQL 语法学习与实践
    LeetCode 198. 打家劫舍(House Robber)LeetCode 213. 打家劫舍 II(House Robber II)
    LeetCode 148. 排序链表(Sort List)
    LeetCode 18. 四数之和(4Sum)
    LeetCode 12. 整数转罗马数字(Integer to Roman)
    LeetCode 31. 下一个排列(Next Permutation)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    论FPGA建模,与面向对象编程的相似性
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5140673.html
Copyright © 2011-2022 走看看