React+umi+antdesign实现上传文件组件（阿里云）

开始之前需要封装一个上传的方法fileUtils.ts

import { message } from 'antd';
import Base64 from 'crypto-js/enc-base64';
import Utf8 from 'crypto-js/enc-utf8';
import HmacSHA1 from 'crypto-js/hmac-sha1';
import { request } from 'umi';const isDev = process.env.NODE_ENV === 'development';export namespace FileUtil {const env = {timeout: 10000,uploadHost: 'https://hopeman.oss-cn-beijing.aliyuncs.com/',};const genPolicy = () => {const date = new Date();date.setHours(date.getHours() + env.timeout);const srcT = date.toISOString();const policyText = {expiration: srcT,conditions: [['content-length-range', 0, 1 * 1024 * 1024 * 1024], // 设置上传文件的大小限制1G],};const rawStr = JSON.stringify(policyText);const wordArray = Utf8.parse(rawStr);const policyBase64 = Base64.stringify(wordArray);return policyBase64;};const genSignature = (policyBase64: string, accessKey: string) => {const byte = HmacSHA1(policyBase64, accessKey);const signature = Base64.stringify(byte);return signature;};export const upload = async (options: any, dir?: string): Promise<string> => {const fileInfo = options.file;const { onError = () => {}, onSuccess = () => {}, fullHost = '', ext = false } = options;return new Promise(async (resolve) => {const res = await request('/common/ram/assumeRole', {method: 'POST',});if (res?.code === 200 && res?.data) {const {Credentials: { AccessKeyId, AccessKeySecret, SecurityToken },} = res.data;const fileNameSplit = fileInfo?.name.split('.') || [];const aliyunFileKey = `${dir ?? 'excel'}/event_${new Date().getTime()}${ext ? '.' + fileNameSplit[fileNameSplit?.length - 1] : ''}`; //文件命名const policyBase64 = genPolicy();const signature = genSignature(policyBase64, AccessKeySecret);const data = new FormData();data.append('key', aliyunFileKey);data.append('policy', policyBase64);data.append('OSSAccessKeyId', AccessKeyId);data.append('signature', signature);data.append('x-oss-security-token', SecurityToken);data.append('file', fileInfo);data.append('success_action_status', '200');try {await request(isDev ? '/upload' : UPLOAD_HOST, {method: 'POST',data,});const url = `${fullHost}${aliyunFileKey}`;onSuccess(url);resolve(url);} catch (e) {onError(options);resolve('');}} else {message.error('上传失败');onError(options);resolve('');}});};export const base64CoverFile = (dataUrl: string) => {/*** base64 转 File* @param data*/const arr = dataUrl.split(','),mime = arr?.[0]?.match(/:(.*?);/)?.[1],bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}const blob = new Blob([u8arr], { type: mime });// blob.lastModifiedDate = new Date(); // 文件最后的修改日期// blob.name = fileName; // 文件名return new File([blob], Date.now().toString(), { type: blob.type, lastModified: Date.now() });};// 浏览器本页下载文件export const downFileByUrl = (url: string) => {if (!url || url.length === 0) {message.error('url 不存在');return;}const a = document.createElement('a');a.setAttribute('href', url);document.body.appendChild(a);a.click();document.body.removeChild(a);};export const downMultipleFileByUrl = (urls: string[]) => {if (!urls || urls.length === 0) {message.error('url 不存在');return;}for (let i = 0; i < urls.length; i++) {const iframe = document.createElement('iframe');iframe.style.display = 'none'; // 防止影响页面// @ts-ignoreiframe.style.height = 0; // 防止影响页面iframe.src = urls[i];document.body.appendChild(iframe);// 5分钟之后删除setTimeout(() => {iframe.remove();}, 5 * 60 * 1000);}};
}
//AliyunOssUpload 组件
import { FileUtil } from '**/fileUtils';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, Image, message, Upload } from 'antd';
import type { RcFile } from 'antd/lib/upload';
import type { UploadFile } from 'antd/lib/upload/interface';
import filesize from 'filesize';
import type { FC, ReactElement } from 'react';
import React, { Fragment, useState } from 'react';
import styles from './styles.less';export type AliyunOssUploadProps = UploadProps & {value?: any;fullHost?: string | boolean; // 阿里云的Host,默认只返回目录，当 true 时，默认的是 UPLOAD_HOSTlimitSize?: number; // 文件大小限制单位 bytes(B) 默认是 2 * 1024 * 1024(2M) 0 表示不限制ext?: boolean; // 阿里云文件路径中是否包含文类后续名, 默认不包含文件类型后缀buttonRef?: any;readOnly?: boolean;uploadButtonRender?: ReactElement;maxCount?: number;
};const UploadImageButton = React.forwardRef((props, ref: any) => {return (<div ref={ref} className={'aliyunUpBtn'}><PlusOutlined className={'aliyunUpIcon'} /><div className={'aliyunUpTitle'} style={{ marginTop: 8 }}>上传图片</div></div>);
});const UploadNormalButton = React.forwardRef((props, ref: any) => (<Button ref={ref} icon={<UploadOutlined />}>点击上传</Button>
));const AliyunOssUpload: FC<AliyunOssUploadProps> = (props) => {const [previewVisible, setPreviewVisible] = useState(false);const [previewSrc, setPreviewSrc] = useState('');let { fullHost = '' } = props;const {ext = false,disabled,buttonRef,readOnly = false,maxCount = 1,uploadButtonRender,} = props;fullHost = typeof fullHost === 'boolean' ? (fullHost ? UPLOAD_HOST : '') : fullHost;const uploadProps: UploadProps = {listType: 'picture-card',headers: {authorization: 'authorization-text',},maxCount: maxCount,customRequest: (options) => FileUtil.upload({ ...options, fullHost, ext }),onPreview: (file: UploadFile) => {const src = file?.response || file?.thumbUrl;if (src) {setPreviewSrc(src);setPreviewVisible(true);}},defaultFileList: props?.value?.fileList?.map((item: any) => ({uid: item?.uid,name: item?.url,url: item?.url,response: item?.url,thumbUrl: item?.url,})),beforeUpload: async (file: RcFile) => {const initAccept = props?.accept || 'image/png,image/jpg,image/jpeg';const accept = initAccept.split(',');const limitSize = props?.limitSize ?? 1024 * 1024 * 2;const isValidType = accept?.includes(file.type);const isValidSize = limitSize ? file.size < limitSize : true;if (!isValidType) {await message.error(`仅支持 ${initAccept} 格式`);}if (!isValidSize) {await message.error(`图片大小不能超过 ${filesize(limitSize, { base: 2, standard: 'jedec' })}`,);}return (isValidType && isValidSize) || Upload.LIST_IGNORE;},showUploadList: { showRemoveIcon: !readOnly },...props,};const uploadButton = () => {if (readOnly || disabled) {return;}if (uploadProps?.maxCount) {if (props?.value?.fileList?.length >= uploadProps.maxCount) {return null;} else {if (uploadButtonRender) return uploadButtonRender;return props.listType === 'picture-card' || 'picture' ? (<UploadImageButton ref={buttonRef} />) : (<UploadNormalButton ref={buttonRef} />);}} else {if (uploadButtonRender) return uploadButtonRender;return props.listType === 'picture-card' || 'picture' ? (<UploadImageButton ref={buttonRef} />) : (<UploadNormalButton ref={buttonRef} />);}};if (!props.value?.fileList?.length && disabled) return <>-</>;return (<Fragment><Upload className={styles.uploadBox} {...uploadProps}>{uploadButton()}</Upload><div style={{ fontSize: 0, position: 'absolute' }}><Imagewidth={200}style={{ display: 'none' }}src={previewSrc}preview={{visible: previewVisible,src: previewSrc,onVisibleChange: (val) => {setPreviewVisible(val);},}}/></div></Fragment>);
};export default AliyunOssUpload;

在页面中使用 时

<AliyunOssUploadaccept={'image/png,image/jpg,image/jpeg'}fullHostmaxCount={5} //根据业务需求填写listType={'picture-card'}limitSize={1024 * 1024 * 5} //根据业务需求填写/>

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

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

相关文章

php文件怎么设置隐藏显示代码,php文件隐藏的方法

php文件怎么设置隐藏显示代码,php文件隐藏的方法

php文件隐藏的方法&#xff1a;1、在“httpd.conf”里任意位置添加代码为“AddType application/x-httpd-php .asp .py .pl .jsp aspx”&#xff1b;2、对PHP使用未知扩展名。隐藏你的.php文件今天做PHP在线手册镜像的时候看到了这个方法,哈哈,以前都没有注意到,所以说,手册是最…
阅读更多...
【Mininet】Mininet脚本实现控制交换机行为

【Mininet】Mininet脚本实现控制交换机行为

实验参考&#xff1a; Mininet脚本实现控制交换机行为 实验步骤&#xff1a; 1. 一台交换机两台主机&#xff0c;实现从1端口进入的数据流转发到2端口&#xff0c;从2端口进入的数据流转发到1端口。 1. 创建新文件mymininet1.py并编辑以下内容&#xff08;注意要将控制器设置为…
阅读更多...
遇到困难沟通一下

遇到困难沟通一下

今天中午睡了一个午觉&#xff0c;很甜的那种&#xff0c;我没有睡午觉的习惯&#xff0c;只是今天特别累&#xff0c;很累很累。下午开始工作的时候&#xff0c;同事发给我一条消息&#xff0c;希望将现有系统的架构改变一下&#xff0c;他把一些想法和建议发给我&#xff0c;…
阅读更多...
【Mininet】基于Mininet实现BGP路径挟持攻击实验

【Mininet】基于Mininet实现BGP路径挟持攻击实验

实验参考&#xff1a; 基于Mininet实现BGP路径挟持攻击实验 实验步骤&#xff1a; comming soon... 转载于:https://www.cnblogs.com/ptolemy/p/11255993.html
阅读更多...
matlab dpsk,2DPSK调制与解调matlab(最新整理)

matlab dpsk,2DPSK调制与解调matlab(最新整理)

《2DPSK调制与解调matlab(最新整理)》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《2DPSK调制与解调matlab(最新整理)(5页珍藏版)》请在人人文库网上搜索。1、- 2DPSK 调制与解调%-%参数初始化%-fs 3600000;%采样频率为 36000 赫兹Time_Hold_On 1/1200;%一个时钟周…
阅读更多...
nantpad

nantpad

1 下载2 解压并安装3 创建一文本文件,后缀名为reg,修改其内容为:Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Profusion Software Studios\Nantpad\Product Key]"Key""MCrjVCHOFmHDJBJl"4 双击转载于:https://www.cnblogs.com/Will…
阅读更多...
matlab2018b中svm无法运行,关于matlab2018a版本错误使用 svmclassify 分类器

matlab2018b中svm无法运行,关于matlab2018a版本错误使用 svmclassify 分类器

当我们照常使用分类器函数svmclassify时&#xff0c;2018版的matlab会报出以下错误&#xff1a;解决办法&#xff1a;1&#xff0c;下载libsvm(一般下载最新版本就ok了)包&#xff0c;并将其添加至matlab的toolbox文件里。并打开matlab编辑器&#xff0c;主页 / 设置路径 / 添…
阅读更多...
【Mininet】Mininet多个数据中心的拓扑网络实现

【Mininet】Mininet多个数据中心的拓扑网络实现

实验参考&#xff1a; Mininet多个数据中心的拓扑网络实现 实验步骤&#xff1a; comming soon... 转载于:https://www.cnblogs.com/ptolemy/p/11256000.html
阅读更多...
php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...

php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...

PHP实现ftp上传文件示例FTP上传是PHP实现的一个常见且非常重要的应用技巧&#xff0c;今天就来与大家分享一下PHP实现FTP上传文件的简单示例。希望对大家的PHP学习能带来一定的帮助。主要代码如下&#xff1a;function make_directory($ftp_stream, $dir){// if directory alre…
阅读更多...
文字在状态栏上从右往左显示，而且是循环的

文字在状态栏上从右往左显示，而且是循环的

<script><!--functionHelpor_net(seed){ varm1 "欢迎来到小寒的博客!";varm2 "";varmsgm1m2;varout "";varc 1;varspeed 120;if(seed >100){ seed-2;varcmd"Helpor_net("seed ")";timerTwowindow.setTimeout(cm…
阅读更多...
【Mininet】Mininet MAC地址学习实验

【Mininet】Mininet MAC地址学习实验

实验参考&#xff1a; Mininet MAC地址学习实验 实验步骤&#xff1a; 1. 在虚拟机上启动mininet&#xff0c;创建一个线型拓扑&#xff08;如下图所示&#xff09;&#xff0c;控制器设置为无&#xff08;# sudo mn –-topo linear –-mac –-switch ovsk –-controllernone&a…
阅读更多...
windows窗口 matlab,windows – 有没有办法改变MATLAB命令窗口的标题？

windows窗口 matlab,windows – 有没有办法改变MATLAB命令窗口的标题？

对于Matlab 7&#xff1a;jDesktop com.mathworks.mde.desk.MLDesktop.getInstance;jDesktop.getMainFrame.setTitle(my new title);*或专门用于命令窗口&#xff1a;cmdWin jDesktop.getClient(Command Window);cmdWin.getTopLevelAncestor.setTitle(my new title);对于Matl…
阅读更多...
监狱vs工作单位

监狱vs工作单位

监狱&#xff1a;大部分时间&#xff0c;你待在一个8x10的房间里。工作单位&#xff1a;大部分时间&#xff0c;你待在一个6x8的隔间里。监狱&#xff1a;每日三餐工作单位&#xff1a;只有一顿饭&#xff0c;而且&#xff0c;你要付钱。监狱&#xff1a;表现好可以早离开。工作…
阅读更多...
【Mininet】基于Mininet的VxLAN实验

【Mininet】基于Mininet的VxLAN实验

实验参考&#xff1a; 基于Mininet的VxLAN实验 实验步骤&#xff1a; 1. 如下图所示&#xff0c;在两台虚拟机中利用mininet创建两个网络&#xff0c;利用VxLAN连通这两个mininet环境。关闭默认的控制器后&#xff0c;通过下发流表确保网络的连通性&#xff1a; 2. 先查看两台虚…
阅读更多...
matlab中复化辛普森公式函数,复化梯形公式,辛普森公式的matlab程序

matlab中复化辛普森公式函数,复化梯形公式,辛普森公式的matlab程序

复化梯形公式与辛普森公式的matlab程序【程序代码】cclc;disp(1.复化梯形公式求解);disp(2.simpson公式求解);disp(请进行选择&#xff1a;);cinput( );if c1clc;disp(复化梯形公式);disp(请输入积分下限 );ainput(a);disp(请输入积分上限 );binput(b);disp(请输入等分的数目 )…
阅读更多...
Ajax基石脚本异步并发调用参数传递

Ajax基石脚本异步并发调用参数传递

在Ajax开发框架中&#xff0c;最基本的划分是服务器端和客户端。服务器端相对来说比较简单&#xff0c;只要是可以开发动态网页的语言都可以胜任&#xff1b;客户端浏览器就是JScript/JavaScript的天下了&#xff0c;好像没有看到有VBScript做的Ajax客户端库&#xff0c;就算它…
阅读更多...
matlab disteclud,机器学习实战ByMatlab（3）K-means算法

matlab disteclud,机器学习实战ByMatlab（3）K-means算法

K-means算法属于无监督学习聚类算法&#xff0c;其计算步骤还是挺简单的&#xff0c;思想也挺容易理解&#xff0c;而且还可以在思想中体会到EM算法的思想。K-means 算法的优缺点&#xff1a;1.优点&#xff1a;容易实现2.缺点&#xff1a;可能收敛到局部最小值&#xff0c;在大…
阅读更多...
【Mininet】使用l2_multi模块寻找最短路径实验

【Mininet】使用l2_multi模块寻找最短路径实验

实验参考&#xff1a; 使用l2_multi模块寻找最短路径实验 实验步骤&#xff1a; comming soon... 转载于:https://www.cnblogs.com/ptolemy/p/11256021.html
阅读更多...
智能安全实验室－Defendio杀马2.4.0.420－实时防护－内存防护、新浏览器导航界面...

智能安全实验室－Defendio杀马2.4.0.420－实时防护－内存防护、新浏览器导航界面...

智能安全实验室&#xff0d;杀马(Defendio) 2.4.0.420 &#xff1a;实时防护&#xff0d;内存防护、新浏览器导航界面等 详细信息请访问&#xff1a;http://unruledboy.cnblogs.com/archive/2006/02/02/Defendio.html怎样获取最新版本&#xff1f;□智能更新&#xff1a;打开现…
阅读更多...
mysql5.7空间运算,深度解析MySQL5.7之临时表空间

mysql5.7空间运算,深度解析MySQL5.7之临时表空间

临时表临时表顾名思义&#xff0c;就是临时的&#xff0c;用完销毁掉的表。 数据既可以保存在临时的文件系统上&#xff0c;也可以保存在固定的磁盘文件系统上。临时表有下面几种&#xff1a;1、全局临时表这种临时表从数据库实例启动后开始生效&#xff0c;在数据库实例销毁后…
阅读更多...
最新文章

Copyright @ 2022~2023