上传文件

西瓜皮儿 2022/8/19

# 前端:Form表单形式

可以利用iframe防止form表单跳转

<body>
    <form action="http://127.0.0.1:8888/uploadFile" enctype="multipart/form-data" method="post" target="frameName">
        <div>
            <input type="file" name="file">
            <input type="submit" value="上传!">
        </div>
    </form>
    <iframe src="" frameborder="0" name="frameName"></iframe>
</body>

1
2
3
4
5
6
7
8
9

# 前端fetch

<body>
    <input type="file" id="fileInput" />
    <button id="uploade">上传</button>

    <script>
        uploade.addEventListener('click', () => {
            if (fileInput.files.length < 0) console.wran('请选择文件再上传！');
            const formData = new FormData();
            formData.append("file", fileInput.files[0]);
            fetch('http://127.0.0.1:8888/uploadFile', {
                method: "POST",
                body: formData,
            }).then(res => res.text()).then(res => console.log(res));
        })
    </script>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 服务器接收文件

引入multer包

const multer = require("multer");

// check：定义存储文件位置和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'files')
    },
    filename: function (req, file, cb) {
        const type = file.mimetype.split("/")[1];
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, file.fieldname + '-' + uniqueSuffix + `.${type}`)
    }
})
const upload = multer({ storage: storage });

// 写入处理中间件
app.post("/uploadFile", upload.single("file"), uploadFile);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 服务器只读文件

const multer = require("multer");
const readerStorage = multer.memoryStorage();
const fileReader = multer({ storage: readerStorage }).single("file");
const readFile = (req, res) => {
    fileReader(req, res, (err) => {
        if (err) {
            console.log(err);
        } else {
            console.log(req.file);
            res.send('111');
        }
    })
}

app.post("/readFile", readFile);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 静态资源服务器

const express = require("express");
const path = require("path");

app.use("/file", express.static(path.join(__dirname, "../../files")));

1
2
3
4

前端访问：xxx/file/xxx.mp4

# 测试

node基础