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

news/2024/5/30 17:03:21/文章来源:https://blog.csdn.net/CHENC0518/article/details/136677437

1.定义结构

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

2.内容

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配置)

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.定义接口

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, //该图片的预览路径});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1006111.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

地理数据 vs. 3D数据

在表示我们周围的物理世界时&#xff0c;地理空间数据和 3D 建筑数据是两个最常见的选择。 他们在各个行业和项目中发挥着至关重要的作用。 从构建数字孪生到可视化城市景观和创建沉浸式应用程序。 尽管地理空间和 3D 建筑数据有相似之处&#xff0c;但它们不可互换。 虽然地…

关于分布式微服务数据源加密配置以及取巧方案(含自定义加密配置)

文章目录 前言Spring Cloud 第一代1、创建config server项目并加入加解密key2、启动项目&#xff0c;进行数据加密3、实际项目中的测试server Spring Cloud Alibaba低版本架构不支持&#xff0c;取巧实现无加密配置&#xff0c;联调环境问题加密数据源配置原理探究自定义加密解…

Redis底层数据结构之Hash

文章目录 1. Redis底层hash编码格式2. Redis 6源码分析3. Redis 7源码分析 1. Redis底层hash编码格式 在redis6中hash的编码格式分别是ziplist&#xff08;压缩列表&#xff09;和hashtable&#xff0c;但在redis7中hash的编码格式变为了listpack&#xff08;紧凑列表&#xf…

Prometheus 系统监控

文章目录 1.Linux1.1.Node exporter1.2.安装部署 2.Windows2.1.windows_exporter2.2.安装部署 3.Docker3.1.cadvisor3.2.安装部署 4.Nginx4.1.nginx-vts-exporter4.2.安装部署 5.Redis5.1.redis_exporter5.2.安装部署 6.RabbitMQ6.1.rabbitmq_exporter6.2.安装部署 7.PostgreSQ…

三星泄露微软 Copilot 新功能:用自然语言操控各种功能

3 月 11 日消息&#xff0c;微软计划本月晚些时候发布新款 Surface 电脑和适用于 Windows 11 的 Copilot 新功能&#xff0c;但三星似乎等不及了&#xff0c;在其即将推出的 Galaxy Book4 系列产品宣传材料中泄露了一些即将到来的 Copilot 功能。 三星官网上发布的图片证实了此…

EasyExcel注解实现导出动态下拉框字符超出255

背景 项目需求要把某些用户数据通过下拉框的形式带出&#xff0c;供用户手动选择与自己相关的数据&#xff0c;从而实现excel的数据权限。由于字段有两个&#xff0c;后面可能更多&#xff0c;方便起见&#xff0c;使用自定义注解的形式&#xff0c;动态配置&#xff0c;并且动…

CSS 之 iconfont 字体图标的使用

iconfont 字体图标的常见使用场景&#xff1a; 如小米商城底部的导航栏 特点是&#xff1a;方便更改大小和颜色&#xff0c;可以使用字体的属性对其样式进行修改&#xff0c;从而更加轻易地实现图标和文字样式的同步修改。 第一步&#xff1a;在浏览器中搜索 https://www.i…

Visual Basic6.0零基础教学(3)—焦点概念和深入学习属性

焦点概念和深入学习属性 文章目录 焦点概念和深入学习属性前言一、什么是焦点(Focus)?焦点的特点 二、窗体属性一、窗体的结构二、窗体的属性三、事件四、方法 一.控件属性一. 标签 Label二.文本框 TextBox2.常用事件 三.命令按钮事件 总结 前言 今天我们来继续学习VB中的属性…

C编程基础四十分笔记

都是一些基础的C语言 一 输入一个整数&#xff0c;计算这个整数有几位二 编写程序计算一个分布函数三 输入一个字符串&#xff0c;再随便输入一个字母&#xff0c;判断这个字母出现几次四 求 1到10的阶乘之和五 求一个球体体积六 写一个链表&#xff0c;存1&#xff0c;2&#…

javaEE4(预习第3章,做课后习题1:简答)

1、简答 &#xff08;1&#xff09;Jsp页面翻译成的Servlet类的源文件在哪里可以找到&#xff1f;servlet实例是每次请求页面都会创建一个&#xff0c;还是只有一个&#xff08;单例&#xff09;&#xff1f; tomcat工作目录下的work目录下 只有一个 页面中定义变量加和不加…

一台服务器部署两个独立的mysql实例

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

c++中的if语句、switch语句、std::map以及多态比较

实现多分支逻辑的场景通常可以使用以下几种技术手段可以选择 if-else语句switch语句三元运算符&#xff08;只能实现2个分支的场景&#xff0c;本文不做讨论&#xff09;映射表&#xff08;std::map、数组或std::vector&#xff09;多态&#xff08;策略模式为例&#xff09; …

Docker自建蜜罐系统【失陷检测、外网威胁感知、威胁情报】

项目地址&#xff1a; https://hfish.net Hfish是一款基于Docker的网络钓鱼平台&#xff0c;它能够帮助安全团队模拟各种网络钓鱼攻击&#xff0c;以测试和提高组织的安全防御能力。 Hfish的优点 为什么选择Hfish&#xff1f; 蜜罐通常被定义为具有轻量级检测能力、低误报率…

ELK 安装部署

文章目录 1.日志收集规划2.Elasticsearch部署2.1.Elasticsearch安装2.2.Elasticsearch-head安装2.3.Elasticsearch设置分片数2.4.elasticsearch健康检查 3.Kibana部署4.Logstash部署5.Filebeat部署 开源中间件 # Elastic Stackhttps://iothub.org.cn/docs/middleware/ https:/…

如何把网站的http改成https?

想把网站从不安全的HTTP换成安全的HTTPS&#xff1f;来瞧瞧下面几步操作&#xff1a; 1.挑个SSL证书&#xff1a; - 根据你的网站情况&#xff08;比如就一个域名、多个域名还是啥域名都得管&#xff09;&#xff0c;找一款适合的SSL证书&#xff0c;有免费的DV&#xff08;验…

Ypay源支付6.9无授权聚合免签系统可运营源码

YPay是一款专为个人站长设计的聚合免签系统&#xff0c;YPay基于高性能的ThinkPHP 6.1.2 Layui PearAdmin架构&#xff0c;提供了实时监控和管理的功能&#xff0c;让您随时随地掌握系统运营情况。 说明 Ypay源支付6.9无授权聚合免签系统可运营源码 已搭建测试无加密版本…

STM32平替GD32有多方便

众所周知, GD32一直模仿STM32,从未被超越。 我最近公司使用的GD32E230C6T6 这款芯片有48个引脚。 属于小容量的芯片。 我有一个用STM32写的代码,之前是用的 STM32F103CB 这款芯片是中容量的。 不过在keil中,只需要这两步,就能使用原来的逻辑,几乎不用修改代码。 1. …

【典】dp背包问题(树求方案)

回顾在acw上做过的题 有依赖的背包问题 这一题是与树相关的dp问题&#xff0c;根据父节点与子节点的相连关系&#xff0c;我们用dfs来处理根节点与子树的迭代更新&#xff0c;把每一颗最小单位子树看成一个物品&#xff0c;然后就有点像多重背包&#xff08;因为有体积限制&…

大宗电子盘商品撮合制交易软件PHP后台

大宗电子盘商品撮合制交易软件是一种用于大宗商品电子交易的系统&#xff0c;其中撮合制是交易机制的核心部分&#xff0c;它负责将买卖双方的订单进行匹配并完成交易。在开发这类软件的PHP后台时&#xff0c;需要考虑以下几个关键方面&#xff1a; 系统架构设计&#xff1a; …

3、设计模式之工厂模式2(Factory)

一、什么是工厂模式 工厂模式属于创建型设计模式&#xff0c;它用于解耦对象的创建和使用。通常情况下&#xff0c;我们创建对象时需要使用new操作符&#xff0c;但是使用new操作符创建对象会使代码具有耦合性。工厂模式通过提供一个公共的接口&#xff0c;使得我们可以在不暴露…