express+multer实现上传图片

//依赖
npm install --save express multer 
express中文文档:

http://www.expressjs.com.cn/

multer中文文档:

https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

html

//enctype="multipart/form-data" 
//file域的 multiple="multiple" 决定一个文件域可以上传多个图片
<form name="uploadForm" 
    id="uploadForm" 
    method="post" 
    enctype="multipart/form-data" 
    action="http://192.168.1.200/uploads" 
    target="uploadFrame">
    <p style="margin:10px 0;">上传图片:
        <input type="text" name="name" value="xiangheng">
        <input type="file" name="imageFile" multiple="multiple"/>
        <input type="submit" id="fileSubmit" value="上传" />
    </p>
</form>

node


var fs = require("fs");//操作文件
var express = require("express");//server服务
var multer = require('multer');//接收图片

var upload = multer({
    dest: './uploads'
});//定义图片上传的临时目录

var app = express();

// 单域多文件上传:input[file]的 multiple=="multiple"
app.post('/uploads', upload.array('imageFile', 5), function(req, res, next) {
    // req.files 是 前端表单name=="imageFile" 的多个文件信息(数组),限制数量5,应该打印看一下
    for (var i = 0; i < req.files.length; i++) {
        // 图片会放在uploads目录并且没有后缀,需要自己转存,用到fs模块
        // 对临时文件转存,fs.rename(oldPath, newPath,callback);
        fs.rename(req.files[i].path, "upload/" + req.files[i].originalname, function(err) {
            if (err) {
                throw err;
            }
            console.log('done!');
        })
    }

    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*"//允许跨域。。。
    });
      // req.body 将具有文本域数据, 如果存在的话
    res.end(JSON.stringify(req.files)+JSON.stringify(req.body));
})

// 单域单文件上传:input[file]的 multiple != "multiple"
app.post('/upload', upload.single('imageFile'), function(req, res, next) {
    // req.file 是 前端表单name=="imageFile" 的文件信息(不是数组)
    
    fs.rename(req.file.path, "upload/" + req.file.originalname, function(err) {
        if (err) {
            throw err;
        }
        console.log('上传成功!');
    })
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*"
    });
    res.end(JSON.stringify(req.file)+JSON.stringify(req.body));
})


app.listen(80);

还有多文件域上传,多个input[type=file],我没试!!!(这句话对不对也没试)

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files 是一个对象 (String -> Array) 键是文件名, 值是文件数组
  //
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body 将具有文本域数据, 如果存在的话
})

https://www.adtk.cn

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大部分的后端会很很鄙视前端。我也不知道为什么,可能大部分人都会觉得脚本语言根本不算语言。 大多人 会叫我们切图仔,...
    小黑的眼阅读 3,511评论 0 15
  • 前端知识体系http://www.cnblogs.com/sb19871023/p/3894452.html 前端...
    秋风喵阅读 12,646评论 7 163
  • 我们一天天长大一天天快乐却不知道母亲和父亲是在背后一把屎一把尿的,把我们从幼小的我带大,长大成人。
    糖糖的星空阅读 136评论 0 1
  • 现在在上管理思想史,相比思修和新生研讨课而言其实这课挺有用的,可是大家仿佛都没有和我同样的感受,从这堂课远远没有另...
    京太儿阅读 279评论 2 4
  • 第1章 遇金鱼— 从前,在蔚蓝的大海边,坐落着一间十分简陋的泥棚,里面住着一对老夫妻,他们在这儿过了整整三十又三...
    涵宝爱故事阅读 963评论 0 0