Antd和React使用Upload上传组件自定义上传文件（图片为例）

陈不知代码2024-03-14 11:50

1.定义结构

javascript 复制代码

             <Upload
                accept="image/*"
                listType="picture-card"
                fileList={fileList}
                onChange={onChange}
                onPreview={onPreview}
                customRequest={handlePreview}
              >
                {fileList.length < 1 && "+ 上传封面"}
              </Upload>

2.内容

javascript 复制代码

import type { GetProp, UploadFile, UploadProps } from "antd";

const [fileList, setFileList] = useState<UploadFile[]>([]);

const onChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

const onPreview = async (file: UploadFile) => {
    let src = file.url as string;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj as FileType);
        reader.onload = () => resolve(reader.result as string);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };

const handlePreview = async (file: any) => {
    const form = new FormData();
    form.append("file", file.file);
    const res: any = await UploadApi(form);
    console.log("上传结果", res);
    if (res.status === 0) {
      const FileList = [
        {
          uid: "1",
          name: res.name,
          url: res.url,
        },
      ];
      setFileList(FileList);
    }
    return false;
  };

3.nodejs接收（app.js配置）

javascript 复制代码

const multer = require("multer");
let objMulter = multer({ dest: "./public/upload" });
//实例化multer，传递的参数对象，dest表示上传文件的存储路径
app.use(objMulter.any()); //any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型
app.use(express.static("./public"));

4.定义接口

javascript 复制代码

const fs = require("fs");
async function UploadFile(req, res) {
  console.log("上传内容", req.files);
  const name = Buffer.from(req.files[0].originalname, "latin1").toString(
    "utf8"
  );//nodejs对于中文产生乱码的解决办法
  let oldName = req.files[0].path; //获取名字
  //给新名字加上原来的后缀
  let newName = req.files[0].path + name;
  fs.renameSync(oldName, newName); //改图片的名字
  res.send({
    status: 0,
    name: name,
    url: "http://localhost:6789/upload/" + req.files[0].filename + name, //该图片的预览路径
  });
}