Node+multer实现文件的上传

最新推荐文章于 2024-01-13 00:03:47 发布

@二十六

最新推荐文章于 2024-01-13 00:03:47 发布

阅读量355

点赞数

文章标签： javascript nodejs upload

本文链接：https://blog.csdn.net/qq_44212319/article/details/104109759

版权

Node上传文件

介绍：使用express框架和multer，来实现文件的上传。

HTML代码，分为原生表单上传文件和axios上传文件。

<!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>Document</title>
    <style>
        #app{
            border: 1px solid #575757;
            margin: 30px 0;
        }
    </style>
</head>

<body>
    <h1>文件上传</h1>
    <form action="/up" method="post" enctype="multipart/form-data">
        <input id="files" type="file" name="file" multiple /> 
        <!-- 这里的multiple属性是允许多文件上传的，单文件上传可以不写此属性（最好都写上）-->
        <input type="submit" value="原生表单上传文件" />
    </form>

    <div id="app">
        <input type="file" name="file" ref='upload' capture="camera" id="file">
        <button type="submit" @click='postFile'>axios上传文件</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{},
        methods:{
            postFile:function(){
                /*
                    上传文件，必须使用formData方法
                    formData.append(name,value),里面的 name 对应的是 input 的name值
                    value对应的是input的files[0]，不是input.val()
                    对于的type=file的input，图片是在input的 FileList 里面
                */ 
                var formData = new FormData();
                formData.append('file',this.$refs.upload.files[0]);
                axios({
                    method:'post',
                    url:'http://127.0.0.1:3000/up',
                    anync:true,
                    contentType:false,
                    processData:false,
                    data:formData
                }).then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
        }
    });
</script>
</html>

Node后端方面代码

// 需要安装 express框架 和 multer

// 1、引入express框架
var express = require('express');

// 2、创建服务器应用程序
var app = express();
var fs = require('fs');

// 3、配置multer
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });


// 完全控制文件的储存位置和命名
// 注意：使用这种方式，必须手动先创建一个存放文件的目录
// var storage = multer.diskStorage({
//     destination: function (req, file, cb) {
//         cb(null, './my-uploads')
//     },
//     filename: function (req, file, cb) {
//         cb(null, file.originalname)
//     }
// })
// var upload = multer({ storage: storage })

// 渲染首页
app.get('/', function(req, res){
    fs.readFile("./index.html", function(err, data){
        if(err){
            return res.send('404');
        }else{
            res.setHeader('Content-Type', 'text/html; charset=utf-8');
            res.send(data.toString());
        }
    });
});

// 上传文件接口
app.post('/up', upload.single('file'), function (req, res, next) {
    if(req.file === undefined){
        return res.send("文件为空");
    }
    // fs.renameSync(oldpath, newpath);
    fs.renameSync('./uploads/' + req.file.filename, "./uploads/"+ req.file.originalname);
    res.send("成功");
})

app.listen(3000, function(){
    console.log("App is running at http://127.0.0.1:3000");
});

上传的文件，会保存在当前目录下的uploads文件夹内

@二十六

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Node+multer实现文件的上传

Node上传文件介绍：使用express框架和multer，来实现文件的上传。HTML代码，分为原生表单上传文件和axios上传文件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...
复制链接

扫一扫