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

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, //该图片的预览路径
  });
}
相关推荐
RainbowSea几秒前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴6 分钟前
笨方法学python -练习14
java·前端·python
Mintopia13 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖17 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia23 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农28 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye31 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤35 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子39 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html