文件上传——node（express框架）

文件上传

表单上传

上传文件需要修改form的enctype属性为：enctype="multipart/form-data"，

<form action ="/api/user" method="POST" enctype="multipart/form-data">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="password">
        </div>
        <div>
            年龄：<input type="text" name="age">
        </div>
        <div>
            头像：<input type="file" name="avatar">
        </div>
        <div>
            <button type="submit">添加用户</button>
        </div>
    </form>

有一个问题，后端不能直接解析multipart/form-data类型的文件，这时候就需要使用中间件 multer

• 安装：npm install --save multer
• 创建文件夹存储文件：

const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })

• 接收文件，进行存储
  upload.single(传过来的参数名)

即：

const multer  = require('multer')
const upload = multer({ dest: 'public/uploads/' })

// 响应post请求，增加用户
router.post("/user",upload.single("avatar"),UserController.addUser)

• 文件以二进制形式进行存储
  
• 读取文件将文件放在数据库中
  后端可以通过req.file获取文件

 addUser: async (req, res) => {
  console.log(req.body,req.file)
  // 插入数据库
  const avatar = `/uploads/${req.file.filename}` 
  const { username, password, age } = req.body
    
  await UserService.addUser( username, password, age,avatar)
  res.send({ok:1})
  },

addUser

addUser: (username, password, age ,avatar) => {
        // .create就相当于插入
        return UserModel.create({
            username: username,
            password: password,
            age: age,
            avatar:avatar
        }).then(data => {
            console.log(data)
        })
    },

UserType

const UserType = {
    username: String,
    password: String,
    age: Number,
    avatar:String
}

添加用户：

数据库：

如果用户没有选择图片要选择默认图片

addUser: async (req, res) => {
  console.log(req.body,req.file)
  // 插入数据库
  const avatar = req.file?`/uploads/${req.file.filename}` :`/images/default.png`
  const { username, password, age } = req.body
    
  await UserService.addUser( username, password, age,avatar)
  res.send({ok:1})
  },

• 图片回显
  后端从数据库获取avatar

 getUser: (page,limit) => {
        return UserModel.find ({},["username","age","avatar"]).sort({age:1}).skip((page-1)*limit).limit(limit)
    },

前端显示：

axios.get("/api/user?page=1&limit=2").then((res) => {
           res = res.data
            console.log(res);
            var tbody = document.querySelector("tbody");
            // map映射
            tbody.innerHTML = res
              .map(
                (item) => `
              <tr>
                <td>${item._id}</td>
                <td>${item.username}</td>
                <td>${item.age}</td>
                <td> <button class="update" value=${item._id}>更新</button><button class="delete" value=${item._id}>删除</button> </td>
                <td><img src="${item.avatar}"/></td>
              </tr>
              `
              )
              // src="${item.avatar}"是请求命令不是图片地址
              .join("");
          })

效果：

代码获取：

axios上传

前后后端分离，axios上传

• html编写：

<div>用户名:<input id="username" /></div>
      <div>密码:<input type="password" id="password" /></div>
      <div>年龄:<input type="number" id="age" /></div>
      <div>头像:<input type="file" id="avatar" /></div>
      <div><button id="register">注册</button></div>

• axios请求
  使用avatar.files[0]获取文件对象，
  需要修改成from表单对象
  使用multipart/form-data格式发送

register.onclick = () => {
        console.log(username.value, password.value, age.value,avatar.files[0]);
        const formdata = new FormData()
        formdata.append("username",username.value)
        formdata.append("password",password.value)
        formdata.append("age",age.value)
        formdata.append("avatar",avatar.files[0])
        axios.post("/api/user",formdata,{
          headers:{
            'Content-Type':'multipart/form-data'
          }
        }).then((res) => {
            console.log(res.data);
          });

        }

完整代码获取：
链接：https://pan.baidu.com/s/1ZOR3xgHOBsgX9CgCyLiYFA?pwd=xtfx
提取码：xtfx