必威体育Betway必威体育官网
当前位置:首页 > IT技术

前台使用ajax上传图片,后台 node.js 使用 formidable 进行图片接受并存于服务器静态文件夹中

时间:2019-10-17 12:44:33来源:IT技术作者:seo实验室小编阅读:59次「手机版」
 

formidable

相信现在很多小伙伴在使用node来搭建后台,那么前后台对接少不了的就是图片的上传,下面我将通过这篇文章来对图片上传问题进行详细的介绍:

项目源码已经上传GitHub,https://github.com/crazyJiaLin/node-img-upload-demo

首先,我们需要一些准备:

  1. 通过node+express搭建后台服务器,并配置静态资源文件路径,具体配置方式网上有很多种解法,这里不再展示,如果不想自己搭建,可以从本人GitHub中检出直接使用;
  2. 搭建MVC(model+view+controller)目录结构如下图:

    目录结构

  3. 除express+ejs,我们还需要安装一些模块

    $ npm install formidable dateformat -S

    接着,我们建立上传图片的模块,即文件目录中的model/upload-model.js

var path = require('path');
var fs = require('fs');                     //文件系统
var formidable = require('formidable');     //引用formidable来解析请求,上传文件
var dateFormat = require('dateformat');     //生成时间对象,来重命名上传的图片,避免图片的重复

module.exports = {
    /**通过formdata上传图片
     * 参数1--req,express请求
     * 参数2--dirname,静态资源下的路径
     * 参数3--callback,回调函数,callback(err,fields,uploadPath),返回错误对象,表单字段和图片上传的地址
     */
    uploadPhoto : function(req,dirName,callback){
        //上传文件
        // parse a file upload
        var form = new formidable.IncomingForm();
        form.uploadDir = path.join(__dirname,'../static',dirName);
        //保留文件扩展名
        form.keepExtensions = true;
        form.encoding = 'utf-8';

        form.onPart = function(part) {
            if (part.filename != '') {
            // let formidable handle all non-file parts 
            form.handlePart(part);
            }
        };
        //通过formidable进行图片的上传
        form.parse(req, function(err, fields, files) {
            if(err) {
                callback && callback(err,null,null);
                return;
            }
            if(!files.userfile){    //前台上传表单的时候,文件使用的字段名是userfile,这里对文件是否为空进行判断
                var errMsg = {
                    errCode : -10,
                    errMsg : '文件为空'
                };
                callback && callback(errMsg,null,null);
                return;
            }

            //文件不为空的情况下,说明文件已经上传到我们的服务器中
            //这时,需要我们使用fs模块把我们已经上传的路径改为我们想要的位置
            //并且使用dateFormat来创建时间字符串,从而避免文件的重名
            var time = dateFormat(new Date(), "yyyymmddHHMMss");
            //files.userfile.path代表的是formidable为我们上传文件后绝对路径,通过path的extname来获取图片后缀
            var extName = path.extname(files.userfile.path);    
            var newName = time + '_' + Math.floor(Math.random()*9999) + extName;    //使用dateFormat+随机数+文件后缀生成新文件名

            var oldPath = files.userfile.path;
            var newPath = path.join(__dirname,'../static',dirName, newName);
            //修改文件的名字
            fs.renameSync(oldPath,newPath);
            var finalPath = path.join('/',dirName,newName).split('\\').join('/');   //将路径中的'\'替换为'/'
            callback && callback(null, fields, finalPath);  //回掉函数返回表单字段以及图片上传的相对路径
        }); 
    }
};

然后创建controller层img-upload.js文件,来接受请求,然后交接到model层

var express = require('express');
var router = express.Router();
var uploadModel = require('./../model/upload-model');//上传model


router.post('/imgUpload',function(req,res){
    /**设置响应头允许ajax跨域访问**/
    res.setHeader("Access-Control-Allow-Origin","*");
    uploadModel.uploadPhoto(req,'img',function(err,fields,uploadPath){
        if(err){
            return res.json({
                errCode : 0,
                errMsg : '上传图片错误'
            });
        }
        console.log(fields);    //表单中字段信息
        console.log(uploadPath);    //上传图片的相对路径
        res.json({
            errCode : 1,
            errMsg : '上传成功',
            fields :  fields,
            uploadPath : uploadPath
        });
    });
});

module.exports = router;

这里记得将我们的路由配置放置到server.js中,并使用node server.js 启动项目后台

//路由配置
var imgUploade = require('./controller/img-upload');
APP.use(imgUploade);

然后,我们就可以在前台创建表单对象来提交请求了(index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传demo</title>
</head>
<body>

    <input type="file" id="img-upload">
    <button id="submit-button">开始上传</button>

    <script src="./js/jquery-3.1.0.min.js"></script>
    <script>
        $('#submit-button').on('click',function(){
            var myPhoto = $('#img-upload')[0].files[0];
            var oMyForm = new FormData();
            oMyForm.append("name", 'crazyJiaLin');
            oMyForm.append("userfile", myPhoto);
            $.ajax({
                type : 'POST',
                url : '/imgUpload',
                cache : false,  //不需要缓存
                processData : false,    //不需要进行数据转换
                contentType : false, //默认数据传输方式是application,改为false,编程multipart
                data : oMyForm,
                dataType : 'json'
            }).done(function(data){
                console.log(data);
                alert(data.errMsg);
            }).fail(function(err){
                console.ERROR(err);
            });
        });
    </script>
</body>
</html>

下面来展示一下上传效果:

  • 选择文件后,点击上传按钮,返回上传成功数据

    这里写图片描述

  • 后台返回数据以及文件中图片内容

    这里写图片描述

    这里写图片描述

感谢大家支持,源码已经上传GitHub,https://github.com/crazyJiaLin/node-img-upload-demo,望多多支持!

相关阅读

Vue下使用serialport

用黑框框(命令)运行1:先要安装 node-gypnpm install -g node-gyp (全局安装) 2.需要安装VS2017和python (我电脑里面有VS2017)

“客户之声——天猫评价管理工具”首轮使用名单公布!!!

&ldquo;客户之声&mdash;&mdash;天猫评价管理工具&rdquo;即将发布上线,首轮使用商家,我们采用跟贴方式报名的进行选择,最终确认了此

什么情况下使用指针的引用(指针)

在函数调用时用指针或者引用做参数,表示把变量的地址传递给子函数,但是子函数只能修改指针所指变量的值,并不能修改指针的指向。如果

iOS源生与JS交互的三种方法

JS oc相互调用方法: 1.利用定义url调用 2.利用js直接调用 3.利用js里对象调用 首先先创建UIWebView对象,加载本地html文件//加载

ScheduledExecutorService使用之——重复创建停止周期

ScheduledExecutorService的创建就不用多说,直接上代码 executorService = Executors.newSingleThreadScheduledExecutor(); Sch

分享到:

栏目导航

推荐阅读

热门阅读