前言

本次做后臺管理系統，采用的是 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, })} listType="picture-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指的是當前正在上傳的 單個 img，fileList是已上傳的全部 img 列表。 當我上傳完 兩張圖片后， 打印結果如下：

file的打印的結果如下：

{ "uid": "rc-upload-1551084269812-5

總結

以上是生活随笔為你收集整理的ant design 预览图片_AntD框架的upload组件上传图片时遇到的一些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。