文件上传

文件上传

服务器路由：

// ./routes/students.js
const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require("path")
const fs = require("fs");
const { rootPath } = require("../utils/baseInfo")
const upload = multer({ dest: path.join(rootPath, "/public/images/headPic") });//** 
​
​
// 文件上传接口
router.post('/upload', upload.single('file'), async function (req, res, next) {//** 
  //其中'file'是文件上传的key
  const originalname = req.file.path;
  const newname = originalname + path.extname(req.file.originalname);
​
  fs.rename(originalname, newname, error => {
    if (error) throw error;
    const responsename = newname.replace(rootPath + `${path.sep}public${path.sep}`, "");//
    res.send(responsename);
  })
});
// 文件删除接口
router.post('/deletePic', async function (req, res, next) {//** 
  const { file } = req.body;
  fs.unlink(path.join(rootPath, "public", file), function (err) {
    if (err) res.send(false);
    else res.send(true);
  })
});
​
module.exports = router;
​

服务器工具模块，用来保存项目根目录

//. ./util/baseInfo.js
const path = require("path");
const os = require("os")
// os.type()
// 在 Linux 上返回 'Linux'，在 macOS 上返回 'Darwin'，在 Windows 上返回 'Windows_NT'。
module.exports = {
    rootPath:path.join(/window/i.test(os.type())?"":"/",path.resolve(__dirname,"../"))//项目根路径
}

 

客户端文件本地显示代码：

function getFileURL(file) {//该方法用来获取文件在浏览器中的缓存地址，实现本地显示
    var getUrl = null;
    if (window.createObjectURL != undefined) { // basic
        getUrl = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        getUrl = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
    }
    return getUrl;
}
//   ./views/students/update.js-->handler
//监听文件上传的input事件,用于本地显示图片
$(document).on("input", ".update-head-pic-file", function () {
  const file = this.files[0];
  if (file) $(this).nextAll("img").attr("src", getFileURL(file));
});

客户端文件上传ajax原生实现：

function upload(url,keyName,file) {
  //url:上传的服务器接口。
  //keyName：上传的文件的key。
  //file：上传的文件（由input[type='file']获取）
  return new Promise(r => {
    const fd = new FormData();
    fd.append(keyName, file);//键的名字必须与服务器对应
    $.ajax({
      url:"xxxxxx",
      type: "post",//*** 
      data: fd,//*** 
      cache: false,//上传文件无需缓存
      contentType: false,//*** //数据的解析类型，不需要，我们上传2进制数据，没有类型
      processData: false,//*** //用于对data参数进行序列化处理 这里必须false
      success(data) {
        r(data)
      }
    })
  })
}

layui实现：

var uploadInst = upload.render({
  elem: '#test1' //绑定元素
  , url: '/students/upload/' //上传接口
  ,auto:false//自动上传，选择完图片立即上传
  ,field:"file"//文件上传的key,默认：“file”
  ,bindAction:"#sure"//非自动上传时，图片上传触发的按钮
  , headers: { "Authorization": `Bearer ${localStorage.user_token}` }//jwt验证需要的请求头
  , done: function (res) {
    //上传完毕回调
  }
  , error: function () {
    //请求异常回调
  }
  , choose(obj){
    //将每次选择的文件追加到文件队列
    var files = obj.pushFile();
    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
    obj.preview(function(index, file, result){
      //==========该函数中可以实现图片预览
      //通过getFileURL(file)  获取缓存地址，即可用于img标签显示
      
      console.log(index); //得到文件索引
      console.log(file); //得到文件对象
      console.log(result); //得到文件base64编码，比如图片
      //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
      //这里还可以做一些 append 文件列表 DOM 的操作
      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
    });
  }
});

具体代码（这里是原生实现，我们最好改为腊鱼你实现）：

//   ./views/students/update.js
//添加
$("#tab-wrap-add").on("click", ".addBtn", async function () {
  const $fileInput = $(".addStudentForm [type='file']");
  const file = $fileInput[0].files[0];
  if (file) {//file存在即上传
    const headPic = await that.upload("/students/upload", "headPic", file);
    $fileInput.prev().val(headPic);
  }
  const { status } = await that.add({ stu: layui.form.val("addStudent") })
  if (status) {
    layui.layer.msg("添加成功！");
  } else {
    layui.layer.msg("添加失败！");
  }
​
})
//   ./views/students/add.js
//更新
$("#tab-wrap-update").on("click", ".updateBtn", async function () {
  const id = $(".updateStudentForm")[0].id.value;
  const $fileInput = $(".updateStudentForm [type='file']");
  const file = $fileInput[0].files[0];
​
  //删除-start
  const oldHeadPic = $(".updateStudentForm")[0].headPic.value;
  if (oldHeadPic && file) {
    await that.deletePic("/students/deletePic",oldHeadPic)
  }
  //删除-end
​
  //文件上传-start
  if (file) {//file存在即上传
    const headPic = await that.upload("/students/upload", "headPic", file);
    $fileInput.prev().val(headPic);
  }
  //文件上传-end
​
  //上传成功后更新学生信息
  const data = await that.update({ stu: $(".updateStudentForm").serialize(), id })
  if (data.status) {
    layui.layer.msg("修改成功！");
    location.hash = "/info/list/学生信息";
  } else {
    layui.layer.msg("修改失败！");
  }
})