Nest 多文件上传

前端

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>
    <input type="file" id="imageInput" multiple accept="image/*" />
    <button onclick="uploadImages()">上传图片</button>
    <div id="uploadStatus"></div>
  </body>
  <script>
    function uploadImages() {
      const files = document.getElementById("imageInput").files;
      const formData = new FormData();
      const statusDiv = document.getElementById("uploadStatus");
      statusDiv.innerHTML = ""; // 清除之前的上传状态

      // 检查是否有文件被选择
      if (files.length === 0) {
        statusDiv.innerHTML = "请选择文件";
        return;
      }
      formData.append("module", "user"); // 添加其他字段，例如文件名
      // 遍历所有选中的文件，添加到FormData中
      for (let i = 0; i < files.length; i++) {
        formData.append("image", files[i]);
      }

      // 使用fetch API发送数据到服务器
      fetch("http://localhost:5000/v1/testdemo/uploadOnefile", {
        // 替换为你的服务器端点URL
        method: "POST",
        body: formData,
      })
        .then((response) => response.json()) // 假设服务器返回JSON格式的响应
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            alert("上传成功");
          } else {
            alert("上传失败");
          }
        })
        .catch((error) => {
          console.error("Error:", error);
          statusDiv.innerHTML = "上传失败"; // 更新状态显示上传失败
        });
    }
  </script>
</html>

nest 参照单图

仅仅需要新建一个管道验证器pipe即可,2 换成你自己的数字

import { ArgumentMetadata, Injectable, PipeTransform } from "@nestjs/common";
import dotenv from "dotenv";
dotenv.config();
@Injectable()
export class UploadPipe implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    if (value.length > 1) {
      let count = 0;
      let type = 0;
      if (value.length > 2) {
        return {
          status: 403,
          data: `图片个数不能超过2个}`,
          value: value,
        };
      }
      // 多图
      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[0].size > 1024 * 1024 * 10) {
        return {
          status: 403,
          data: "图片大小不能超过10M",
          value: value,
        };
      }
      if (value[0].mimetype.indexOf("image") == -1) {
        return {
          status: 403,
          data: "必须是图片",
          value: value,
        };
      }
      return value;
    }
  }
}

Nest 多文件上传 ​

前端 ​

nest 参照单图 ​

Nest 多文件上传

前端

nest 参照单图