Nest 实现单图上传
前端
特别注意
注意
使用 FormData 和 fetch API 上传图片（示例代码，需要根据后端 API 调整） const formData = new FormData(); formData.append("module", "books"); // 添加其他字段，例如文件名 formData.append("image", file); // 'image' 是后端期待的字段名，根据需要调整
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片上传</title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<label for="imageInput">选择图片:</label>
<input type="file" id="imageInput" name="image" accept="image/*" />
<button type="button" onclick="uploadImage()">上传图片</button>
</form>
<div id="preview"></div>
<script>
function uploadImage() {
const fileInput = document.getElementById("imageInput");
const file = fileInput.files[0]; // 获取选中的文件
if (!file) {
alert("请选择一个文件");
return;
}
// 创建预览图片的URL（可选）
const preview = document.getElementById("preview");
const img = document.createElement("img");
img.src = URL.createObjectURL(file); // 创建图片的URL用于预览
img.style.maxWidth = "100%"; // 设置最大宽度以适应容器
preview.innerHTML = ""; // 清空之前的预览内容
preview.appendChild(img); // 将图片添加到预览区域
// 使用FormData和fetch API上传图片（示例代码，需要根据后端API调整）
const formData = new FormData();
formData.append("image", file); // 'image' 是后端期待的字段名，根据需要调整
formData.append("module", "user"); // 添加其他字段，例如文件名
fetch("http://localhost:5000/user/upload", {
// '/upload' 是你的后端处理上传的URL，需要替换为实际URL
method: "POST",
body: formData,
})
.then((response) => response.json()) // 假设服务器返回JSON格式的响应
.then((data) => {
console.log("Success:", data); // 处理响应数据，例如显示上传成功信息等
if (data.code == 200) {
alert("上传成功");
} else {
alert("上传失败");
}
})
.catch((error) => {
console.error("Error:", error); // 处理错误情况，例如显示错误信息等
alert("上传失败2222"); // 或者在页面上显示错误消息等操作
});
}
</script>
</body>
</html>Nest 前置
安装依赖
bash
npm install --save @nestjs/platform-express multer
npm install -D @types/multerstorage.ts
- 根目录创建 utils/storage.ts
ts
import * as multer from "multer";
import * as path from "path";
import * as fs from "fs";
const storage = multer.diskStorage({
destination: (req, file, cb) => {
const dir = path.join(__dirname, "../../", "public/ceshiupload");
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, { recursive: true });
}
cb(null, dir);
},
filename: (req, file, cb) => {
const randomName = Array(32)
.fill(null)
.map(() => Math.round(Math.random() * 16).toString(16))
.join("");
return cb(null, `${randomName}${path.extname(file.originalname)}`);
},
});
/**
* @param { delPath：String } （需要删除文件的地址）
* @param { direct：Boolean } （是否需要处理地址）
*/
const deleteFile = (delPath, direct) => {
delPath = direct ? delPath : path.join(__dirname, delPath);
try {
/**
* @des 判断文件或文件夹是否存在
*/
if (fs.existsSync(delPath)) {
console.log(delPath);
fs.unlinkSync(delPath);
} else {
console.log("inexistence path：", delPath);
}
} catch (error) {
console.log("del error", error);
}
};
export { storage, deleteFile };创建上传模块
- upload.module.ts
ts
import { Module, Global } from "@nestjs/common";
import { UploadService } from "./upload.service";
import { UploadController } from "./upload.controller";
@Global()
@Module({
controllers: [UploadController],
providers: [UploadService],
exports: [UploadService],
})
export class UploadModule {}创建上传控制器
- upload.controller.ts
ts
import { Controller } from "@nestjs/common";
@Controller("upload")
export class UploadController {}创建上传提供者
- upload.service.ts
ts
import { HttpException, Inject, Injectable } from "@nestjs/common";
import { deleteFile } from "../../utils/storage";
@Injectable()
export class UploadService {
async findone(files, pathname) {
if (files["status"] == 403) {
for (let i = 0; i < files["value"].length; i++) {
deleteFile(files["value"][i].path, true);
}
return {
code: 403,
data: "",
message: files["data"],
};
// throw new HttpException(files['message'], 403);
} else {
const url: string[] = [];
files.forEach((item) => {
url.push(
"http://localhost:5000/public/images/" +
pathname +
"/" +
item.filename
);
});
return {
url,
};
}
}
}创建管道验证
- upload.pipe.ts
ts
import { ArgumentMetadata, Injectable, PipeTransform } from "@nestjs/common";
@Injectable()
export class UploadPipe implements PipeTransform {
transform(value: any, metadata: ArgumentMetadata) {
if (value.length > 0) {
let count = 0;
let type = 0;
// 多图
value.map((item: any) => {
// 判断大小
if (item.size > 1024 * 1024 * 10) {
count++;
}
// 判断类型
if (item.mimetype.indexOf("image") == -1) {
type++;
}
});
if (count > 0) {
return {
status: 403,
data: "图片大小不能超过10M",
value: value,
};
}
if (type > 0) {
return {
status: 403,
data: "必须是图片",
value: value,
};
}
return value;
} else {
// 单图
if (value.size > 1024 * 1024 * 10) {
return {
status: 403,
data: "图片大小不能超过10M",
value: value,
};
}
if (value.mimetype.indexOf("image") == -1) {
return {
status: 403,
data: "必须是图片",
value: value,
};
}
return value;
}
}
}Nest 使用
- 其他使用的 controller 中引入
ts
import {
Controller,
Post,
Body,
UseInterceptors,
UploadedFiles,
} from '@nestjs/common';
import { UserService } from './user.service';
import { FilesInterceptor } from '@nestjs/platform-express';
import { UploadService } from '../upload/upload.service';
import { UploadPipe } from '../../pipe/upload.pipe';
import { storage } from '../../utils/storage';
// 上传 要是文件的话image 换成 file 前端对应的image也换成file
@Post('upload')
@UseInterceptors(
// 独立自己的
FilesInterceptor('image', 3, {
storage: storage,
}),
)
async upload(
@Body() body: any,
@UploadedFiles(UploadPipe)
files: Array<Express.Multer.File>,
) {
let name = body.module;
return this.UploadService.findone(files, name);
}