node 上传图片学习笔记

安装
npm install formidable@latest

app.js中

var postphoto = require('./routes/upphoto');
app.use('/photos', postphoto);

routers文件夹下面创建upphoto。js

var formidable = require('formidable'),
    util = require('util');

var express = require('express');
var router = express.Router();
const path = require('path');
var fs = require("fs")
    /* GET home page. */
router.post("/upload", (req, res) => {
    // console.log(req)
    if (req.url == '/upload' && req.method.toLowerCase() === 'post') { // 处理上传的文件    
        var form = new formidable.IncomingForm();
        form.uploadDir = path.join(__dirname, 'tmp'); //文件保存的临时目录为当前项目下的tmp文件夹    
        form.maxFieldsSize = 1 * 1024 * 1024; //用户头像大小限制为最大1M      
        form.keepExtensions = true; //使用文件的原扩展名
        // console.log(form)
        // form.uploadDir = "public/images";
        form.parse(req, function(err, fields, file) {
            console.log(333)
            var filePath = ''; //如果提交文件的form中将上传文件的input名设置为tmpFile,就从tmpFile中取上传文件。否则取for in循环第一个上传的文件。        
            if (file.tmpFile) {
                filePath = file.tmpFile.path;
            } else {
                for (var key in file) {
                    if (file[key].path && filePath === '') {
                        filePath = file[key].path;
                        break;
                    }
                }
            } //文件移动的目录文件夹,不存在时创建目标文件夹        
            var targetDir = path.join(__dirname, 'upload');
            if (!fs.existsSync(targetDir)) {
                fs.mkdir(targetDir);
            }
            var fileExt = filePath.substring(filePath.lastIndexOf('.')); //判断文件类型是否允许上传        
            if (('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase()) === -1) {
                var err = new Error('此文件类型不允许上传');
                res.json({
                    code: -1,
                    message: '此文件类型不允许上传'
                });
            } else { //以当前时间戳对上传文件进行重命名            
                var fileName = new Date().getTime() + fileExt;
                var targetFile = path.join(targetDir, fileName); //移动文件            
                fs.rename(filePath, targetFile, function(err) {
                    if (err) {
                        console.info(err);
                        res.json({
                            code: -1,
                            message: '操作失败'
                        });
                    } else { //上传成功,返回文件的相对路径                    
                        var fileUrl = '/upload/' + fileName;
                        res.json({
                            code: 0,
                            fileUrl: fileUrl
                        });
                    }
                });
            }

            // res.writeHead(200, { 'content-type': 'text/plain' });
            // res.write('received upload:\n\n');
            // console.log(files)
            // console.log(fields.Field)
            // res.end(util.inspect({ fields: fields, files: files }));
        });
        return;
    }
})



module.exports = router;

js中点击input filter

 $('#fulAvatar').on('change', function() {
        var fd = new FormData();
        fd.append("Field", this.files[0]);
        console.log(this.files[0]);
        $.ajax({
            url: '/photos/upload',
            type: "POST",
            data: fd,
            processData: false, // 不处理发送的数据
            contentType: false //不去设置Content-Type请求头
        });

    })

猜你喜欢

转载自blog.csdn.net/colorset/article/details/82886066