前后端分离(蜗牛学苑05)-上传图片前后端处理，图片预览，数据库保存图片数据，数据加密，md5、bcypt加密，认证流程，生成token，前端请求携带token,token配置，认证后处理，统一处理

1、图片上传前端处理

1、index.html

 <div>
      <label>上传头像</label>
      <input type="file" id="upload">
    </div>
    <div class="imag-box">
      <!-- 显示图片预览 -->
      <img src="" alt=""/>
    </div>
    <div>
      <button id="addStudent">确认新增</button>
    </div>

  //图片上传
  $('#upload').change(function () {
   
    //1、选中图片的相关信息
    //console.log(this)
    const files=this.files
    //2、处理图片信息，添加到表单对象formData中，这是原生js提供的
    const formData=new FormData()
    //formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息
    formData.append('file',files[0])
    //3、通过ajax将文件发送出去，实际应该是formData发送出去
    $.ajax({
   
      url:'/images/upload',
      type:'POST',
      data:formData,
      //cache:是否读取缓存中的结果，
      cache:false,
      //数据编码格式是否适用jquery方法
      contentType:false,
      //发送的图片数据是否转换为其他格式
      processData:false,
      success(msg){
   
        console.log(msg)
      }
    })


  })

2、图片上传后端处理

需安装multer文件上传插件

npm i multer

1、为上传按钮的change事件添加逻辑

//图片上传
  $('#upload').change(function () {
   
    //1、选中图片的相关信息
    //console.log(this)
    const files=this.files
    //2、处理图片信息，添加到表单对象formData中，这是原生js提供的
    const formData=new FormData()
    //formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息
    formData.append('file',files[0])
    //3、通过ajax将文件发送出去，实际应该是formData发送出去
    $.ajax({
   
      url:'/images/upload',
      type:'POST',
      data:formData,
      //cache:是否读取缓存中的结果，
      cache:false,
      //数据编码格式是否适用jquery方法
      contentType:false,
      //发送的图片数据是否转换为其他格式
      processData:false,
      success(msg){
   
        console.log(msg)
      }
    })


  })

2、在app.js里添加一级路由

const imagesRouter=require('./routes/images')

app.use('/images', imagesRouter)

3、在routes里添加images路由

var express = require('express');
var router = express.Router();

//引入文件上传插件
const {
    uploadFiles }=require('../utils/handleFiles')

router.post('/upload', async function(req, res, next) {
   
  //这里返回的upload依然还是一个方法
  const upload=uploadFiles({
   
    //设置上传成功后的图片存储路径
    path:'./public/images',
    //和前端传来的fromData的第一个参数需要一致，也就是‘file’（formData.append('file',files[0])）
    key:'file',
    //上传图像大小限制单位是kb
    size:1000
  })
  upload(req,res,function (err) {
   
    if (err){
   
      console.log('图片上传失败')
    }else{
   
      console.log('图片上传成功',req.files)
    }
  })

});

module.exports = router;

4、建立一个utlis目录，创建第三方编写好的handleFile.js，里面exports出四个文件操作方法
handleFile.js

// 文件上传 npm i multer
const multer = require('multer');
const fs = require('fs');
const path = require('path');

/**
 * 文件上传
 * 参数说明：接收一个 options 对象作为参数，该对象包含三个属性
 * - path：图片上传路径
 * - key：与前端 formData 对象的 fieldname 相匹配（即 formData.append()方法的第一个参数）
 * - size: 设置图片最大限制，单位 kb
 */
function uploadFiles(options = {
   }) {
   
  // 1. 对参数 options 进行解构并设置默认值
  const {
    path = "./public/temp", key = "file", size = 1000 } = options;
  // 2. 设置 multer 的参数，配置 diskStorage，来控制文件存储的位置以及文件名字等
  const storage = multer.diskStorage({
   
    // 2.1 确定图片存储的位置
    destination: function (req, file, cb) {
   
      // 当 path 所对应目录不存在时，则自动创建该文件
      try {
   
        fs.accessSync(path);
      } catch (error) {
   
        fs.mkdirSync(path);
      }
      cb(null, path);
    },
    // 2.2 确定图片存储时的名字。（注意：如果使用原名，可能会造成再次上传同一张图片的时候的冲突）
    filename: function (req, file, cb) {
   
      var changedName = new Date().getTime() + '-' + file.originalname;
      cb(null, changedName);
    }
  });
  // 3. 配置图片限制
  const limits = {
   
    // 限制文件大小 1000 kb
    fileSize: 1024 * size,
    // 限制文件数量
    files: 10
  };
  // 4.生成的专门处理上传的一个工具，可以传入 storage、limits 等配置
  const upload = multer({
    storage, limits });
  // 5. 返回多文件上传的设置信息（同样可用于单文件上传）
  return upload.array(key);
}
/**
 * 文件移动
 * 参数说明：接收一个 options 对象作为参数，该对象包含三个属性
 * - fromPath：文件原路径
 * - toPath：文件新路径
 * - filename：文件名
 */
function moveFiles({
    fromPath, toPath, filename } = {
   }) {
   
  if (!filename) {
   
    console.log('文件移动失败：filename 文件名不能为空');
    return;
  }
  // 要移动的文件的原路径
  const sourceFile = path.join(fromPath, filename);
  // 判断源文件是否存在
  try {
   
    fs.accessSync(sourceFile);
  } catch (error) {
   
    console.log('文件移动失败：' + sourceFile + ' 该文件不存在。');
    return;
  }
  // 判断文件要移动的新路径是否存在，如果不存在，则创建
  try {
   
    fs.accessSync(toPath);
  } catch (error) {
   
    fs.mkdirSync(toPath);
  }
  // 文件移动后的新路径
  const newFile = path.join(toPath, filename);
  fs.renameSync(sourceFile, newFile);
}

/**
 * 删除文件
 * 参数说明：该函数接收一个路径字符串作为参数，传递的路径即为要删除的文件路径
 *
 */

function deleteFiles(dir) {
   
  // 判断 dir 是否存在
  try {
   
    fs.accessSync(dir);

  } catch (error) {
   
    console.log(dir + ' 该路径不存在。');
    return;
  }
  try {
   
    // 判断 dir 是文件还是文件夹
    const stats = fs.statSync(dir);
    if <