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 <