react+antd+upload 使用一

1.电脑系统 windows11专业版
2.开发环境 react16+antd4
3.在项目开发的时候,我们会需要在上传的时候做一些限制,下面我来分享一下。
4.template:

<Upload
 listType="picture-card"
 className="avatar-uploader"
 fileList={hotImgFileList}
 showUploadList={{
 showPreviewIcon: true,
 showDownloadIcon: false,
 showRemoveIcon: true,
 }}
 customRequest={(options) => {
 UploadCustomRequest(options, {
 type: 'bgImg',
 FileSize: 1,
 fileType: ['png', 'jpg', 'jpeg'],
 fileTypeValue: '.png、.jpg、.jpeg',
 });
 }}
 beforeUpload={(file) => {
 beforeUpload(file, {
 type: 'bgImg',
 FileWidth: 750,
 FileHeight: 0,
 fileWidthValue: '750*0',
 });
 }}
 >

5.mathods:

const beforeUpload = (file, data) => {
 const width = data.FileWidth;
 const height = file.FileHeight;
 return new Promise((resolve, reject) => {
 let reader = new FileReader();
 reader.addEventListener(
 'load',
 () => {
 let img = new Image();
 img.src = reader.result;
 img.onload = () => {
 if (img.width < width || img.height < height) {
 data.FileHeight == 0
 ? message.error(`请上传宽大于等于 ${data.FileWidth} 的封面图!`)
 : message.error(`请上传宽高大于等于 ${data.fileWidthValue} 的封面图!`);
 reject(`请上传宽高大于等于 ${data.fileWidthValue} 的封面图!`);
 } else {
 resolve();
 }
 };
 },
 false,
 );
 reader.readAsDataURL(file);
 });
 };
const UploadCustomRequest = (options, data) => {
 // console.log(options);
 console.log(options.file);
 console.log(data);
 const fileType = options.file.name.split('.');
 const fileDate = fileType.slice(-1);
 const isFileSize = options.file.size / 1024 / 1024 < data.FileSize;
 let IsFileType = false;
 if (data.fileType.indexOf(fileDate[0]) < 0) {
 IsFileType = false;
 message.error(`仅支持图片格式:${data.fileTypeValue}格式图片!`);
 return Upload.LIST_IGNORE;
 } else {
 IsFileType = true;
 }
 !isFileSize && message.error(`上传图片大小不能超过${data.FileSize}M!`) && Upload.LIST_IGNORE;
 };

6.本期的分享到这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

作者:灰太狼的情与殇原文地址:https://segmentfault.com/a/1190000043844928

%s 个评论

要回复文章请先登录注册