node 图片上传

最新推荐文章于 2024-03-06 15:08:55 发布

hellosnowyy

最新推荐文章于 2024-03-06 15:08:55 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/u012212157/article/details/99861722

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <title>Title</title>
</head>
<body>
<img class="photo photo-img" src="">
<form id="img_form" action="" method="POST" enctype="multipart/form-data">
    <input name="img" type="file" id="img-input"/>
</form>
<script>
    $('#img-input').change(function (e) {
        let param = new FormData(); // 创建form对象
        param.append('file', $("#img-input")[0].files[0]); // 通过append向form对象添加数据
        let config = {
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        }; // 添加请求头
        axios.post('http://172.16.71.147:3000' + '/upload/img', param, config).then(res => {
            $('.photo-img').attr('src', 'http://172.16.71.147:3000' + res.data.data.url);
        }).catch(err => {
        });
    })
</script>
</body>
</html>

var express = require('express');
var multer = require("multer");
var app = express();
var bodyParse = require('body-parser');

// 设置图片存储路径
var storage = multer.diskStorage({
     destination: function(req, file, cb) {
         cb(null, 'public/uploads');
     },
     filename: function(req, file, cb) {
         cb(null, `${Date.now()}-${file.originalname}`)
     }
 })

// 添加配置文件到muler对象。
var upload = multer({ storage: storage });


// bodyParse 用来解析post数据
app.use(bodyParse.urlencoded({extended:false}));
app.use(express.static('public'));

// 解决跨域问题
app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    if (req.method == 'OPTIONS') {
        res.send(200); //让options请求快速返回
    }
    else {
        next();
    }
});

app.get('', function (req, res) {
    res.end('111');
});

// 文件上传请求处理，uploads.array 支持多文件上传，第二个参数是上传文件数目
app.post('/upload/img', upload.single('file'), function (req, res) {
    // 读取上传的图片信息
    console.log('111122222')
    var file = req.file;
    console.log(file)
    // 设置返回结果
    var result = {};
    result.code = 0;
    result.data = {
        url: '/uploads/' + file.filename
    }
    result.errMsg = 'success';
    console.log(result)
    res.end(JSON.stringify(result));
});

// 监听3000端口
var server=app.listen(3000, '0.0.0.0', function () {
    console.log('listening at =====> http://0.0.0.0:3000......');
}) ;

hellosnowyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node 图片上传

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.1/jquery.min.js"></script> &lt...
复制链接

扫一扫