安装模块

因为文件上传使用的mutlr,所以我们得先安装模块

npm install multer

web服务器我这里用的express模块,所以还需要安装一下express

npm install express

使用form方式上传文件

在客户端中,我们需要设置form的enctype属性为multipart/form-data,否则会以application/x-www-form-urlcoded的方式上传,使用这个方式会将数据转换为键值对,即key=value的形式,因为我们上传的是文件,如果不设置属性的化,会报错

注意:文件上传必须使用POST

客户端代码

<!-- 上传文件必须设置enctype为multipart/form-data,否则会报错 -->
    <form action="/profile" method="POST" enctype="multipart/form-data">
        <input type="file" name="avatar" id="file-avatar">
        <input type="submit" value="提交">
    </form>

服务端代码:

// 引入模块
const express = require("express");
const path = require("path");
const multer = require("multer");

// 使用express
const app = express();
// 设置静态资源目录
app.use(express.static(path.join(__dirname,"public")));

// 设置文件上传路径
let uploader = multer({
    storage: multer.diskStorage({
        // 文件保存的位置 cb: 回调函数
        destination: (req,file,cb) => {
            cb(null,path.join(__dirname,"public","upload"));
        },
        // 设置文件名
        filename: (req,file,cb) => {
            cb(null,file.originalname); // originalname表示原始的文件名,就是你上传文件叫什么名字就是什么名字
        }
    })
})

// 接收并处理响应
// single里面需要写表单的name值,否则拿不到数据
app.post("/profile",uploader.single("avatar"),(req,res) => {
    // 如果文件上传成功的化,req.file里面会有文件的信息
    console.log(req.file);
})

// 监听并启动服务
app.listen(3000,() => {
    console.log("服务监听在3000并启动")
})

上传成功的文件信息:

文件信息
文件信息

然后再去文件夹看看,文件就上传上来了

image.png
image.png

使用ajax上传文件

这里为了方便,我就不写原生ajax了,直接用jQuery来实现

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 上传文件必须设置enctype为multipart/form-data,否则会报错 -->
    <form action="/profile" method="POST" enctype="multipart/form-data">
        <input type="file" name="avatar" id="file-avatar">
        <input type="button" value="提交">
    </form>
    <script src="./lib/jquery/dist/jquery.min.js"></script>
    <script>
        // 绑定事件
        // change事件:当文件表单选中了文件就会触发
        $("input:button").click(function() {
            // 实例化formData
            let formdata = new FormData();

            // 设置文件属性
            formdata.append("avatar",$("#file-avatar")[0].files[0]); // 第一个属性是表单的name值,第二个属性是表单的文件信息
            // 发送请求
            $.ajax({
                type:"post",
                url: "/profile",
                data: formdata,
                /* 
                processData默认为true,
                上传的时候会将数据转换成字符串,应为我们上传的是文件,
                所以不需将文件转换成字符串,所以写成false */
                processData: false,
                // 因为contentType默认为application/x-www-form-urlcoded,所以得改成fasle
                contentType: false,
                // 成功时的回调函数
                success: function(result) {
                    if (result.code == 200) {
                        alert(result.msg);
                    }
                },
                // 失败时的回调函数
                error: function() {
                    alert("文件上传失败!");
                }
            })
        })
    </script>
</body>
</html>

服务端代码

// 引入模块
const express = require("express");
const path = require("path");
const multer = require("multer");

// 使用express
const app = express();
// 设置静态资源目录
app.use(express.static(path.join(__dirname,"public")));

// 设置文件上传路径
let uploader = multer({
    storage: multer.diskStorage({
        // 文件保存的位置 cb: 回调函数
        destination: (req,file,cb) => {
            cb(null,path.join(__dirname,"public","upload"));
        },
        // 设置文件名
        filename: (req,file,cb) => {
            cb(null,file.originalname); // originalname表示原始的文件名,就是你上传文件叫什么名字就是什么名字
        }
    })
})

// 接收并处理响应
// single里面需要写表单的name值,否则拿不到数据
app.post("/profile",uploader.single("avatar"),(req,res) => {
    // 判断是否上传成功
    if (req.file) {
        // 文件上传成功返回的数据
        return res.status(200).send({
            code: 200,
            msg: "文件上传成功!",
            // 文件上传成功返回文件的url
            url: path.join("upload",req.file.filename)
        })
    }
    // 文件上传失败的时候返回的数据
    return res.send({
        code: 500,
        msg: "文件上传失败!",
        // 文件上传失败返回null
        url: null
    })
})

// 监听并启动服务
app.listen(3000,() => {
    console.log("服务监听在3000并启动")
})

展示图片

如果你想展示图片的化,可以使用内置对象URL提供的createObjectURL方法来将文件信息转换成二进制数据,可以直接使用

不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 上传文件必须设置enctype为multipart/form-data,否则会报错 -->
    <form action="/profile" method="POST" enctype="multipart/form-data">
        <input type="file" name="avatar" id="file-avatar">
        <input type="button" value="提交">
    </form>
    <img src="" alt="">
    <script>
        // 获取元素
        let avatar = document.querySelector("#file-avatar");
        let oImg = document.querySelector("img");

        // 绑定事件
        // change事件是当文件被选中时触发
        avatar.onchange = function() {
            // 获取图片的url
            // files里面储存着上传文件的信息,以数组心事储存,如果有多个文件,那么数组里面就会有多个文件信息
            let imgUrl = URL.createObjectURL(avatar.files[0]);
            // 设置图片的src属性
            oImg.src = imgUrl;
        }
    </script>
</body>
</html>

实际效果:

图片显示效果
图片显示效果

文章头图: 学校の屋上学校の屋上