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, //该图片的预览路径
  });
}
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9493 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_3 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang6 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔6 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js