react+antd+upload结合使用示例
作者:灰太狼的情与殇
这篇文章主要为大家介绍了react+antd+upload结合使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
电脑系统 windows11专业版
开发环境 react16+antd4
在项目开发的时候,我们会需要在上传的时候做一些限制,下面我来分享一下。
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', }); }} >
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; };
本期的分享到这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
以上就是react+antd+upload 使用的详细内容,更多关于react+antd+upload 使用的资料请关注脚本之家其它相关文章!