react的pdf转图片格式上传到后端

news2024/11/13 16:02:20

这个东西做的我真的是头昏脑涨

主要需求是,upload上传pdf,pdf转图片格式展示,以图片格式上传到后端

封装了组件代码,父组件直接放就可以了

使用的插件pdfjs-dist,版本是  "pdfjs-dist": "2.5.207",node:14.13.0/18.17.0/16.14.2都可以你们要注意node版本是否跟这个插件版本匹配,因为node太老不支持pdfjs插件,而pdfjs插件至少要2.0左右的才会有文件worker.entry文件,本来我是4.0左右版本因为没有需要的文件,所以降下来的。
import React, { useState, useEffect, useRef } from 'react';
import { Spin, Pagination } from 'antd';
import { Form, UploadProps, Image } from "antd";
import { message, Modal, Upload, Button } from "antd";
import { useDispatch, useSelector } from 'react-redux';
import type RootState from '@/types/rootState';
import { getToken } from "@/utils/login";
import config from "@/utils/config";
import type { RcFile, UploadChangeParam } from "antd/lib/upload";
import type { UploadFile } from "antd/es/upload/interface";
import { Toast } from "antd-mobile";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import type { PurchaseOrderAction } from "@/pages/purchase/purchaseOrder/model";
var pdfjsLib = require('pdfjs-dist/build/pdf.js');
import 'pdfjs-dist/build/pdf.worker.entry';

interface PdfViewerProps {
    url: string;
}
const formItemLayout = {
    labelCol: {
        span: 3,
    },
    wrapperCol: {
        span: 12,
    },
};
const PdfViewer = () &

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c语言学习,malloc()函数分析

1:malloc() 函数说明: 申请配置size大小内存空间 2:函数原型: void *malloc(size_t size) 3:函数参数: 参数size,为申请内存大小 4:返回值: 配置成功则返回指针&#…

吃透前端文件上传与文件相关操作 多文件上传 大文件切片上传 拖拽上传 后续还会更新 断点续传等等

最近在学文件上传的操作,所以想把学习到东西写成一文章 这片文章是我以小白视角 慢慢学习并熟悉前端文件相关操作的流程总结出来的 前端文件上传 我首先想到是 <input type"file">**选择文件**</input>如果我们想限制上传文件的格式,大小或进行裁剪分片…

产品经理-如何判断一个产品的好与坏(36)

当面试官问到,如何判断一个产品的好与坏时,该怎么回答,这个问题非常综合地考查了你对产品的理解&#xff0c;但是题目本身非常大且难有标准答案 即使是面试官也不敢说能答好这道题。求职者在遇到这种很开放的题目时&#xff0c;如果不假思索就开答&#xff0c;往往是很危险的。…

在亚马逊云科技上搭建云原生生成式AI教育学习平台

项目简介&#xff1a; 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案&#xff0c;帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践&#xff0c;并应用到自己的日常工作里。 本次介绍的是如何利用亚马逊云科技大模型托…

【python】Python中subprocess模块的参数解读以及应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

如何用AI技术运营漫画推文,实现轻松变现

最近&#xff0c;漫画推文在各大平台上特别火&#xff0c;加上AI技术的加持&#xff0c;现在大家都有机会分一杯羹。今天我就来详细聊聊&#xff0c;如何利用AI技术来运营漫画推文&#xff0c;实现轻松变现。 项目介绍 咱们先来了解一下这个项目到底是啥。漫画推文&#xff0c;…

流量池是什么?萤石物联网卡流量池使用指南

要将4G设备通过萤石开放平台上云&#xff0c;有单卡模式/流量池两种使用模式&#xff0c;以下介绍流量池功能的使用方法 一、账号注册和登录 打开 萤石开放平台官网登录您的账号。若您还没有账号&#xff0c;请注册 二、申请物联网卡 登录后进入物联网卡申请页面没有卡的情况下…

【FreeRTOS】队列实验-多设备玩游戏(红外改造)

目录 0 前言1. 队列实验_多设备玩游戏2 回顾程序3 程序改进3.1 创建队列3.1.1 方法3.1.2 实践 3.2 读队列3.2.1 方法3.2.2 实践 3.3 写队列3.3.1 方法3.3.2 实践 0 前言 学习视频&#xff1a; 【FreeRTOS入门与工程实践 --由浅入深带你学习FreeRTOS&#xff08;FreeRTOS教程 基…

WPS真题题库导入刷题小程序:百思考个人使用经验分享

这篇文章的诞生&#xff0c;是因为我即将踏上一场超级有趣的挑战——备考全国计算机等级二级WPS Office高级应用与设计的冒险之旅&#xff01; WPS的分值&#xff1a; 单项选择题20分(含公共基础知识部分10分)。 WPS处理文字文档操作题30分。 WPS处理电子表格操作题30分。 …

Taro+Vue 创建微信小程序

TaroVue 创建微信小程序 一、全局安装 tarojs/cli二、项目初始化三、现在去启动项目吧 一、全局安装 tarojs/cli npm install -g tarojs/cli //安装 npm info tarojs/cli //查看安装信息 如果正常显示版本说明成功了&#xff0c;就直接跳到第二步吧官网说&#xff1a;…

如何快速自学开源项目?试试我的诀窍

大家好&#xff0c;我是程序员鱼皮。上周二晚上我直播带大家学习了一个 GitHub 上不错的开源聊天室项目 MallChat &#xff0c;大家表示学到了很多&#xff0c;所以我专门剪出了一期项目导学视频&#xff0c;分享给大家&#xff1a; https://www.bilibili.com/video/BV1Q142147…

Redis 高可用性如何实现?

Redis 高可用性如何实现&#xff1f; 1、主备切换2、哨兵集群 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; Redis&#xff0c;作为广泛使用的内存数据结构存储系统&#xff0c;通过一系列机制和策略&#xff0c;如主备切换、哨兵&#xf…

vue脚手架配置代理(解决跨域问题)

vue配置代理 一.介绍二.方法一三.方法二 一.介绍 跨域问题是指协议&#xff0c;主机&#xff0c;端口有一个以上不同 解决方法&#xff1a; 1&#xff0c;cors(最标准&#xff09; 2&#xff0c;jsonp&#xff08;script src&#xff09;&#xff08;比较巧妙&#xff09; 3&a…

使用MongoDB构建AI:Story Tools Studio将生成式AI引入Myth Maker AI游戏

Story Tools Studio利用先进的生成式AI技术&#xff0c;打造沉浸式、个性化、无穷尽的情景体验。 Story Tools Studio创始人兼首席执行官Roy Altman表示&#xff1a;“我们的旗舰游戏Myth Maker AI采用的是我们自主研发的、以AI为驱动的专家指导型故事生成器MUSE&#xff0c;它…

跨境电商新手必知:轻松解决商品详情图一键翻译难题!

在做跨境电商&#xff0c;商品详情图的翻译是至关重要的一环。 对于刚刚踏上跨境电商之旅的个人创业者来说&#xff0c;如何实现一键翻译商品详情图&#xff0c;可能是一个令人头疼的问题。 别担心&#xff0c;现在有许多实用的工具和方法可以帮助您轻松应对。 比如&#xff…

使用Windows11搭建代理服务器

一、问题引入二、下载并安装apache服务器三、配置Apache服务四、安装服务并测试五、文中提到的下载文件集合一、问题引入 使用ccproxy总是有很多限制,而且总是中断,因此就想自己用windows搭建一个。 二、下载并安装apache服务器 进入apache官网https://httpd.apache.org/do…

C/C++实现蓝屏2.0

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &#x1f680;感谢大家点赞&#x1f44d;收藏⭐评论✍ 前…

在使用JMeter做负载测试遇到过的坑

1、本人做的是HTTP测试。遇到一个错误提示 415 not suported mediatype 注意&#xff0c;需要添加一个HTTP信息头管理信息&#xff0c;在运行的时候&#xff0c;请保持它启动是启用状态。 添加步骤如下图。 相关配置信息如下图。因为采用了JWTTOKEN进行权限验证&#xff0c…

SQL面试题练习 —— 有序行转列

目录 1 题目2 建表语句3 题解 1 题目 有学生各学科分数表&#xff0c;记录了学生的各科分数&#xff0c;请按照学生粒度&#xff0c;生成两列数据分别为学科和分数&#xff0c;要求学科内的顺序与分数顺序一致。 样例数据 期望结果 2 建表语句 --建表语句 create table if not…

偶然遇到了scanf输入字符时,前面与要加上空格

任务描述 本关任务&#xff1a;给定一个含有n个学生数据元素的数组a&#xff0c;用头插法来快速创建整个单链表。 相关知识 创建单链表有两种方法&#xff1a; 先初始化一个单链表&#xff0c;然后向其中一个一个地插入元素&#xff0c;通过调用基本运算算法来创建单链表。…