文件上传

最新推荐文章于 2024-08-20 18:55:17 发布

eno_zeng

最新推荐文章于 2024-08-20 18:55:17 发布

阅读量198

点赞数

分类专栏： javascript nodeJs 文章标签：文件上传 nodeJs multer ajax

本文链接：https://blog.csdn.net/z_e_n_g/article/details/83004775

版权

javascript 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

nodeJs

2 篇文章 1 订阅

订阅专栏

ajax 上传文件与 node multer 接收

前端

首先需要input标签选择文件, 然后需要一个按钮点击上传

<input type="file" name="uploadfile" id="uploadfile">
<button id="send">上传</button>

在js中获取`input`和`button`标签

var file = document.getElementById('uploadfile');
var send = document.getElementById('send');

当点击上传按钮是发送ajax请求, 上传文件

只能使用post请求

send.onclick = function () {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if(xhr.status === 200){
            if(xhr.responseText === 'success'){
                alert('上传成功');
            }else{
                alert('上传失败');
            }
        }
    }
    // 创建一个FormData对象多为请求体
    var data = new FormData();
    /**
     * 向data中添加文件
     * 因为这里input是单文件的, 所以使用file.files[0]获取
     */
    data.append('uploadfile', file.files[0]);
    xhr.open('post', 'http://localhost:3000/uploadfile');
    xhr.send(data);
}

这里演示的是单文件上传, 如果希望多文件上传

可以在 input 标签条件属性 multiple="multiple"

然后在data.append 时

使用 0,1,2... 从 file.files 分别获取多个文件, 或遍历file.files

然后添加到data中

后台如何接收前端传来的文件(nodeJs为例)

首先要创建一个nodeJs服务器,这里使用express创建

var express = require('express');
var app = express();

app.listen(3000, function(){
    console.log('服务器启动 端口:', 30000);
});

使用multer模块处理上传文件

var multer = require('multer');
var storage = multer.diskStorage({
    destnation: function(req, file, cd){
        // 设置文件存放路径, 这里存放在./file文件夹下
        cd(null, './file');
    },
    filename: function(req, file, cd) {
        // 设置文件的文件名
        var filename = file.originalname;// => 文件名(带后缀)
        var arr = filename.split('.');//按照 . 切割文件名
        var type = arr[arr.length-1];//获取后缀名
        // 把文件储存起来, 文件名加上时间戳防止重名
        cd(null, file.filename + '-' + Date.now() + '.' + type);
    }
});

var upload = multer({'storage': storage});

创建一个供前端提交的接口

/**
 * upload.single()中的参数要和前端data.append时的第一个参数一致
 * 使用 upload.single() 只支持单文件上传
 */
app.post('/uploadfile', upload.single('file'), function(req, res){
    res.send('success');
});

多文件上传时处理方法

使用upload.array()代替upload.single()

限定上传文件最大数量

// 限制最多只能传9个文件
app.post('/uploadfile', upload.array('file',9), function(req, res){
    res.send('success');
});

或者使用upload.any()直接不限制上传数量

app.post('/uploadfile', upload.any(), function(req, res){
    res.send('success');
});

使用express 和 multer 插件需要本地先安装这两个插件

使用 npm i express multer安装两个插件

完整代码

前端

<!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>上传文件</title>
</head>

<body>
    <input type="file" name="file" id="file" multiple="multiple">
    <br>
    <button>上传</button>
    <script>
        var btn = document.querySelector('button');
        var file = document.querySelector('#file');
        btn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.onload = function(){
                if(xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }
            var data = new FormData();
            for(var f of file.files){
                data.append('file', f);
            }
            xhr.open('post', 'uploadfile');
            xhr.send(data);
        }
    </script>
</body>

</html>

后端

const express = require('express');
const multer = require('multer');

let app = express();

app.use(express.static('public'));
app.listen(3000, () => console.log('服务器启动成功 端口: ', 3000));

let storage = multer.diskStorage({
    destination(req, file, cd){
        // 设置文件存储的目录
        cd(null, './file');
    },
    filename(req, file, cd){
        console.log(file.originalname);
        let arr = file.originalname.split('.');
        cd(null, file.filename + '-' + Date.now() + '.' + arr[arr.length-1]);//加入时间戳防止重名
    }
});

let upload = multer({storage});

/* app.post('/uploadfile', upload.single('file'), (req, res) => {
    res.send('success');
}); */
// 指定限定数量文件(最多上传多少个), upload.array('file', n)
app.post('/uploadfile', upload.array('file',3), (req, res) => {
    res.send('success');
});
// 多文件上传, 使用any()不限制数量
/* app.post('/uploadfile', upload.any(), (req, res) => {
    res.send('success');
}); */