文件上传：axios/multer/node_axum 文件上传-CSDN博客

本文链接：https://blog.csdn.net/weixin_44651559/article/details/117815815

文件上传

文件上传首先，装备两部分，一部分是前台的html部分，进行文件的提交；
一部分是后端API接口的设计，进行文件的获取

前台

前台获取用户传递的文件一般都是使用表单提交的，表单提交的一般有两种，直接使用form表单结构和使用创建表单对象的方式；
这里使用创建表单对象的方式进行数据的传递。

HTML页面

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 内联样式 -->
  <style>
    .frist{
      width: 65vw;
      margin: 50px auto;
      background-color: turquoise;
      line-height: 50px;
      align-items: center;
    }
    .send{
      width: 20vw;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <!-- 这里是基本的布局，进行界面交互的 -->
  <div class="frist">
    <div class="send">
      <input type="file" name="img" id="img"><input type="button" onclick="clicks()" value="提交">
    </div>
  </div>
  <!-- 使用的axios脚本做ajax操作 -->
  <script src="./axios.min.js"></script>
  <script>
    function clicks(){
      let file=document.getElementById('img').files[0];
      // console.log(file)
      let forms=new FormData();
      forms.append('file',file);
      forms.append('filename','nihgaoshijie')
      axios.post('/aaa/upload',forms);
      console.log('已发送！')
    }
  </script>
</body>
</html>

前端的点击事件的绑定使用的是基本dom操作，绑定点击事件

function clicks(){
  // 获取事件触发元素，使用files会获取到文件对象列表，所以一般都会使用下标获取文件对象
  let file=document.getElementById('img').files[0];
  // console.log(file)
  // 创建一个表单对象，进行数据的封装
  let forms=new FormData();
  // 对数据进行封装，注意的是这里使用的方法，第一个参数使用字符串的形式，作为表单对象的属性名，第二个参数使用需要传递的参数
  forms.append('file',file);
  // 可以传递多个属性参数
  forms.append('filename','nihgaoshijie')
  // 对后端发起请求，这里没有写返回值处理方法；axios是使用promise的方式的，处理方法使用then(result=>{.....})方式处理
  axios.post('/aaa/upload',forms);
  console.log('已发送！')
}

后端服务器的使用

// 加载express
const express=require('express');
// 加载路径模块,在后面对文件名处理的时候需要使用，用来获取传输的文件的后缀名
const Path=require('path');
// 加载body解析
const bodyparser=require('body-parser');
// 加载文件上传中间件
const multer=require('multer');
// 引入fs模块对文件进行重命名
const fs =require('fs');
// 规定文件保存路径，这里使用这个对象作为路由方式的中间参数方式；其实还可以使用app.use(upload)方式，这u按在路由中就不用管了
const upload=multer({dest:'uploads/'});
// 创建上传路由
const fileup=express.Router();
// 创建服务
const app=express();
// 使用解析中间件
app.use(bodyparser.urlencoded({extended:false}));
// 使用静态托管
app.use(express.static('public'));
// app.use(multer.any());接收所有的文件
fileup.post('/upload',upload.any(),(req,res,next)=>{
  // 这里接收文件没有做限制，直接接收传输的所有文件
  let file=req.files;
  // req.body是用来获取传递的文本的，因为使用的是any方式接收，可以一起传递包括文件和参数在内一起传递
  let body=req.body;
  // 获取文件原名，其实是获取了文件路径，这个路径包含文件名，文件名是中间件自动生成的，所以不具备识别度，需要重新更改
  let oldname=req.files[0].path;
  // 这里是设置需要的命名，包含文件路径在内；所以签名需要加上文件路径；这里使用的是fs模块
  let newname='uploads\\'+req.files[0].originalname;
  // console.log(oldname+'|'+newname);
  // console.log(file);
  // 使用fs的同步方法进行重新命名
  fs.renameSync(oldname,newname);
  // console.log(body.filename)
})
app.use('/aaa',fileup);


app.listen(8080,()=>{
  console.log('server is runing ....');
})

文件信息

前端获取文件后传递给后端，然后后端接收的文件对象的基本信息如下所示；根据以下信息就可实现对文件的限制，另multer插件也有对传递文件的限制方式

{
    fieldname: 'file',
    originalname: '39954.jpg',
    encoding: '7bit',
    destination: 'uploads/',
    filename: '7768cfc322fe64d677ebba2f84eb9749',
    path: 'uploads\\7768cfc322fe64d677ebba2f84eb9749',
    size: 604559
  }