node.js实现图片上传功能

1、下载第三方插件multer

npm install multer --save

2、先写一个上传图片的接口

在路由文件夹中创建一个fileTest.js文件，代码如下：

复制代码
// 此文件用于：编写图片上传功能

// 导入模块
var express = require('express');
var router = express.Router();
var _ = require('lodash');
var path = require('path');
var multer = require('multer');

// 文件上传的内置方法
let Imgname = ""; // 图片名称
const storage = multer.diskStorage({
    // 文件存储路径
    destination(req, file, callback) {
        // 上传的图片放到本地的文件夹里面
        let imgUrl = "E:/qd/11. node.js/练习/test04_Rest/public/images/fileTestImage"
        // 回调函数
        callback(null, imgUrl)
    },
    filename(req, file, callback) {
        // 后缀名，到时候添加数据的时候，先把它设为空，然后进入图片上传页，然后做修改的操作
        Imgname = _.random(0, 9999999999999) + path.extname(file.originalname);
        callback(null, Imgname);
    }
});

// 也是内置函数
const addfild = multer({
    storage
})

router.get("/",(req, res, next) => {

    res.render('fileTest',{t:1});
})

// 在这里传内置对象过去
router.post("/file",addfild.single('file'), (req, res, next) => {
    console.log(req.body);
})

module.exports = router;
复制代码

3、编写 ejs 页面

页面代码如下：

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
</head>

<body>
    <h1>
        <%=msg%>
    </h1>
    <div id="app">
        <input type="file" @change="file">
    </div>

</body>
<script src="javascripts/axios.js"></script>
<script src="javascripts/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            // file:"",
        },
        created() {

        },
        methods: {
            file(e) {
                let formDate = new FormData();
                formDate.append('file', e.target.files[0]);
                console.log(formDate);
                console.log(e.target.files[0]);
                axios
                    .post("http://127.0.0.1:8082/file/file", formDate)
                    .then((data) => {

                    })
            }
        },
    })
</script>

</html>
复制代码

4、将图片的路径保存到数据库里面

res.send({msg:'上传成功！'，data:'/路径/'+Imgname})

 

本文作者：__fairy

本文链接：https://www.cnblogs.com/fairya/p/16717155.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   __fairy  阅读(684)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.