设计师网站库,网站及新媒体建设办法,软件专业,WordPress做老用户管理前言本次做后台管理系统#xff0c;采用的是 AntD 框架。涉及到图片的上传#xff0c;用的是AntD的 upload 组件。前端做文件上传这个功能#xff0c;是很有技术难度的。既然框架给我们提供好了#xff0c;那就直接用呗。结果用的时候#xff0c;发现 upload 组件的很多bu…前言本次做后台管理系统采用的是 AntD 框架。涉及到图片的上传用的是AntD的 upload 组件。前端做文件上传这个功能是很有技术难度的。既然框架给我们提供好了那就直接用呗。结果用的时候发现 upload 组件的很多bug。下面来列举几个。备注本文写于2019-03-02使用的 antd 版本是 3.13.6。使用 AntD 的 upload 组件做图片的上传因为需要上传多张图片所以采用的是照片墙的形式。上传成功后的界面如下(1)上传中(2)上传成功(3)图片预览按照官方提供的实例特此整理出项目开发中的完整写法亲测有效。代码如下/* eslint-disable */import { Upload, Icon, Modal, Form } from antd;const FormItem Form.Item;class PicturesWall extends PureComponent { state { previewVisible: false, previewImage: , imgList: [], }; handleChange ({ file, fileList }) { console.log(JSON.stringify(file)); // file 是当前正在上传的 单个 img console.log(JSON.stringify(fileList)); // fileList 是已上传的全部 img 列表 this.setState({ imgList: fileList, }); }; handleCancel () this.setState({ previewVisible: false }); handlePreview file { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }; // 参考链接https://www.jianshu.com/p/f356f050b3c9 handleBeforeUpload file { //限制图片 格式、size、分辨率 const isJPG file.type image/jpeg; const isJPEG file.type image/jpeg; const isGIF file.type image/gif; const isPNG file.type image/png; if (!(isJPG || isJPEG || isGIF || isPNG)) { Modal.error({ title: 只能上传JPG 、JPEG 、GIF、 PNG格式的图片~, }); return; } const isLt2M file.size / 1024 / 1024 2; if (!isLt2M) { Modal.error({ title: 超过2M限制 不允许上传~, }); return; } return (isJPG || isJPEG || isGIF || isPNG) isLt2M this.checkImageWH(file); }; //返回一个 promise检测通过则返回resolve失败则返回reject并阻止图片上传 checkImageWH(file) { let self this; return new Promise(function(resolve, reject) { let filereader new FileReader(); filereader.onload e { let src e.target.result; const image new Image(); image.onload function() { // 获取图片的宽高并存放到file对象中 console.log(file width : this.width); console.log(file height : this.height); file.width this.width; file.height this.height; resolve(); }; image.onerror reject; image.src src; }; filereader.readAsDataURL(file); }); } handleSubmit e { const { dispatch, form } this.props; e.preventDefault(); form.validateFieldsAndScroll((err, values) {// values 是form表单里的参数 // 点击按钮后将表单提交给后台 dispatch({ type: mymodel/submitFormData, payload: values, }); }); }; render() { const { previewVisible, previewImage, imgList } this.state; // 从 state 中拿数据 const uploadButton ( Upload ); return ( {getFieldDecorator(myImg)( ({ // data里存放的是接口的请求参数 param1: myParam1, param2: myParam2, photoCotent: file, // file 是当前正在上传的图片 photoWidth: file.height, // 通过 handleBeforeUpload 获取 图片的宽高 photoHeight: file.width, })} listTypepicture-card fileList{this.state.imgList} onPreview{this.handlePreview} // 点击图片缩略图进行预览 beforeUpload{this.handleBeforeUpload} // 上传之前对图片的格式做校验并获取图片的宽高 onChange{this.handleChange} // 每次上传图片时都会触发这个方法 {this.state.imgList.length 9 ? null : uploadButton} )} ); }}export default PicturesWall;上传后点击图片预览浏览器卡死的问题依据上方的代码通过 Antd 的 upload 组件将图片上传成功后点击图片的缩略图理应可以在当前页面弹出 Modal预览图片。但实际的结果是浏览器一定会卡死。定位问题发现原因竟然是图片上传成功后 upload 会将其转为 base64编码。base64这个字符串太大了点击图片预览的时候浏览器在解析一大串字符串然后就卡死了。详细过程描述如下。上方代码中我们可以把 handleChange(file, fileList)方法中的 file、以及 fileList打印出来看看。 file指的是当前正在上传的 单个 imgfileList是已上传的全部 img 列表。 当我上传完 两张图片后 打印结果如下file的打印的结果如下 { uid: rc-upload-1551084269812-5
