AntD框架的upload元件上傳圖片時遇到的一些坑
摘要：
前言
本次做後臺管理系統，採用的是 AntD 框架。涉及到圖片的上傳，用的是AntD的 upload 元件。
前端做檔案上傳這個功能，是很有技術難度的。既然框架給我們提供好了，那就直接用唄。結果用的時候，發現 upload 元件的很多bug。下面來列舉幾個。
備註：本文寫於20...
前言
本次做後臺管理系統，採用的是 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 = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<div className="clearfix">
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem label="圖片圖片" {...formItemLayout}>
{getFieldDecorator('myImg')(
<Upload
action="//jsonplaceholder.typicode.com/posts/" // 這個是介面請求
data={file => ({ // 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}
</Upload>
)}
</FormItem>
</Form>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
}
}
export default PicturesWall;
上傳後，點選圖片預覽，瀏覽器卡死的問題
依據上方的程式碼，通過 Antd 的 upload 元件將圖片上傳成功後，點選圖片的縮圖，理應可以在當前頁面彈出 Modal，預覽圖片。但實際的結果是，瀏覽器一定會卡死。
定位問題發現，原因竟然是：圖片上傳成功後， upload 會將其轉為 base64編碼。base64這個字串太大了，點選圖片預覽的時候，瀏覽器在解析一大串字串，然後就卡死了。詳細過程描述如下。
上方程式碼中，我們可以把 handleChange(file, fileList)方法中的 file 、以及 fileList 打印出來看看。 file 指的是當前正在上傳的 單個 img， fileList 是已上傳的全部 img 列表。 當我上傳完 兩張圖片後， 列印結果如下：
file的列印的結果如下：
{
"uid": "rc-upload-1551084269812-5",
"width": 600,
"height": 354,
"lastModified": 1546701318000,
"lastModifiedDate": "2019-01-05T15:15:18.000Z",
"name": "e30e7b9680634b2c888c8bb513cc595d.jpg",
"size": 31731,
"type": "image/jpeg",
"percent": 100,
"originFileObj": {
"uid": "rc-upload-1551084269812-5",
"width": 600,
"height": 354
},
"status": "done",
"thumbUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAHQ9qKKlbimcXrIH9o2vH/AC2T+ddPj98v+9RRWsuhnHdk0ar9qb5R0Pb6VPB/qh9aKKiRr0Irnt/vUDr+NFFJCRqWxJik5Pb+dLJ938aKK06mYSdKKKKBH//Z",
"response": {
"retCode": 0,
"imgUrl": "http://qianguyihao.com/opfewfwj098902kpkpkkj976fe.jpg",
"photoid": 271850
}
}
fileList 的列印結果：
[
{
"uid": "rc-upload-1551084269812-3",
"width": 1000,
"height": 667,
"lastModified": 1501414799000,
"lastModifiedDate": "2017-07-30T11:39:59.000Z",
"name": "29381f30e924b89914e91b33.jpg",
"size": 135204,
"type": "image/jpeg",
"percent": 100,
"originFileObj": {
"uid": "rc-upload-1551084269812-3",
"width": 1000,
"height": 667
},
"status": "done",
"thumbUrl": "data:image/jpeg;base64,/E3ju1tlaK1fzJOnHQU3LsLV7HO6Zrk11MZJ7luT0A4FZuRagi9quvzQQ4iuEJ7ZpqTG4djDsPFl2Lg733f8C4q+YhQ8zoYfGSqoMmfwo5huLL0HjiyPDSYPvxRdC1XQvxeLrB8fvl/OnoLmL9vrdvvYS3NGFVe2YsASOh71JfQyrqV2mXLHOcccVSIYEnDyZO9XXB9KYH//Z",
"response": {
"retCode": 0,
"msg": "success",
"imgUrl": "http://qianguyihao.com/hfwpjouiurewnmbhepr689.jpg",
}
},
{
"uid": "rc-upload-1551084269812-5",
"width": 600,
"height": 354,
"lastModified": 1546701318000,
"lastModifiedDate": "2019-01-05T15:15:18.000Z",
"name": "e30e7b9680634b2c888c8bb513cc595d.jpg",
"size": 31731,
"type": "image/jpeg",
"percent": 100,
"originFileObj": {
"uid": "rc-upload-1551084269812-5",
"width": 600,
"height": 354
},
"status": "done",
"thumbUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAHQ9qKKlbimcXrIH9o2vH/AC2T+ddPj98v+9RRWsuhnHdk0ar9qb5R0Pb6VPB/qh9aKKiRr0Irnt/vUDr+NFFJCRqWxJik5Pb+dLJ938aKK06mYSdKKKKBH//Z",
"response": {
"retCode": 0,
"imgUrl": "http://qianguyihao.com/opfewfwj098902kpkpkkj976fe.jpg",
"photoid": 271850
}
}
]
上方的json資料中，需要做幾點解釋：
（1） response 欄位裡面的資料，就是請求介面後，後臺返回給前端的資料，裡面包含了圖片的url連結。
（2） status 欄位裡存放的是圖片上傳的實時狀態，包括上傳中、上傳完成、上傳失敗。
（3） thumbUrl 欄位裡面存放的是圖片的base64編碼。
這個base64編碼非常非常長。當點選圖片預覽的時候，其實就是載入的 thumbUrl 這個欄位裡的資源，難怪瀏覽器會卡死。
解決辦法：在 handleChange方法裡，圖片上傳成功後，將 thumbUrl 欄位裡面的 base64 編碼改為真實的圖片url。程式碼實現如下：
handleChange = ({ file, fileList }) => {
console.log(JSON.stringify(file)); // file 是當前正在上傳的 單個 img
console.log(JSON.stringify(fileList)); // fileList 是已上傳的全部 img 列表
if (file && file.response && file.response.retCode == 0) {
console.log('圖片上傳成功');
fileList.forEach(item => {
// 【重要】將 圖片的base64替換為圖片的url。 這一行一定不會能少。
// 圖片上傳成功後，fileList陣列中的 thumbUrl 中儲存的是圖片的base64字串，這種情況，導致的問題是：圖片上傳成功後，點選圖片縮圖，瀏覽器會會卡死。而下面這行程式碼，可以解決該bug。
item.thumbUrl = item.response.imgUrl;
});
}
this.setState({
imgList: fileList,
});
};
新需求：編輯現有頁面
上面一段的程式碼中，我們是在新建的頁面中，從零開始上傳圖片。
現在有個新的需求：如何編輯現有的頁面呢？也就是說說，現有的頁面中，是預設有幾張圖片的。當我編輯這個頁面時，可以對現有的圖片做增刪，也能增加新的圖片。
我看到upload 元件有提供 defaultFileList 的屬性。我試了下，這個 defaultFileList 的屬性根本沒法兒用。
那就只要手動實現了。我的model層程式碼，是用 redux 寫的。實現思路如下：
（1）PicturesWall.js：
/* eslint-disable */
import { Upload, Icon, Modal, Form } from 'antd';
const FormItem = Form.Item;
class PicturesWall extends PureComponent {
state = {
previewVisible: false,
previewImage: '',
};
// 頁面初始化的時候，從介面拉取預設的圖片資料
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'mymodel/getAllInfo',
payload: { params: xxx },
});
}
handleChange = ({ file, fileList }) => {
const { dispatch } = this.props;
if (file && file.response && file.response.retCode == 0) {
console.log('圖片上傳成功');
fileList.forEach(item => {
// 【重要】將 圖片的base64替換為圖片的url。 這一行一定不會能少。
// 圖片上傳成功後，fileList陣列中的 thumbUrl 中儲存的是圖片的base64字串，這種情況，導致的問題是：圖片上傳成功後，點選圖片縮圖，瀏覽器會會卡死。而下面這行程式碼，可以解決該bug。
item.thumbUrl = item.response.imgUrl;
});
}
dispatch({
type: 'mymodel/setImgList',
payload: 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 } = this.state; //從 state 中拿資料
const {
mymodel: { imgList }, // 從props中拿到的圖片資料
} = this.props;
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<div className="clearfix">
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem label="圖片上傳" {...formItemLayout}>
{getFieldDecorator('myImg')(
<Upload
action="//jsonplaceholder.typicode.com/posts/" // 這個是介面請求
data={file => ({
// data裡存放的是介面的請求引數
param1: myParam1,
param2: myParam2,
photoCotent: file, // file 是當前正在上傳的圖片
photoWidth: file.height, // 通過handleBeforeUpload 獲取 圖片的寬高
photoHeight: file.width,
})}
listType="picture-card"
fileList={imgList}// 改為從 props 裡拿圖片資料，而不是從 state
onPreview={this.handlePreview} // 點選圖片縮圖，進行預覽
beforeUpload={this.handleBeforeUpload} // 上傳之前，對圖片的格式做校驗，並獲取圖片的寬高
onChange={this.handleChange} // 每次上傳圖片時，都會觸發這個方法
>
{this.state.imgList.length >= 9 ? null : uploadButton}
</Upload>
)}
</FormItem>
</Form>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
}
}
export default PicturesWall;
（2）mymodel.js:
/* eslint-disable */
import { routerRedux } from 'dva/router';
import { message, Modal } from 'antd';
import {
getTuanList,
getAllFactory,
getAllFactGoods,
createFactShop,
updateFactShop,
deleteFactShop,
updateFactGoodsStatus,
queryShopDetail,
createFactGoods,
} from '../services/api';
import { trim, getCookie } from '../utils/utils';
export default {
namespace: 'factory',
state: {
form: {},
list: [],
listDetail: [],
goodsList: [],
goodsListDetail: [],
pagination: {
pageSize: 10,
total: 0,
current: 1,
},
imgList: [], //圖片
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(location => {
if (location.pathname !== '/xx/xxx') return;
if (!location.state || !location.state.xxxId) return;
dispatch({
type: 'fetch',
payload: location.state,
});
});
},
},
effects: {
// 介面。獲取所有工廠店的列表 (步驟02)
*getAllInfo({ payload }, { select, call, put }) {
yield put({
type: 'form',
payload,
});
console.log('params:' + JSON.stringify(payload));
let params = {};
params = payload;
const response = yield call(getAllFactory, params);
console.log('smyhvae response:' + JSON.stringify(response));
if (response.error) return;
yield put({
type: 'allInfo',
payload:
(response.data &&
response.data.map(item => ({
xx1: item.yy1,
xx2: item.yy2,
}))) ||
[],
});
// response 裡包含了介面返回給前端的預設圖片資料
if (response && response.data && response.data[0] && response.data[0].my_jpg) {
let tempImgList = response.data[0].my_jpg.split(',');
let imgList = [];
if (tempImgList.length > 0) {
tempImgList.forEach(item => {
imgList.push({
uid: item,
name: 'xxx.png',
status: 'done',
thumbUrl: item,
});
});
}
// 通過redux的方式 將 預設圖片 傳給 imgList
console.log('smyhvae payload imgList:' + JSON.stringify(imgList));
yield put({
type: 'setImgList',
payload: imgList,
});
}
},
*setImgList({ payload }, { call, put }) {
console.log('smyhvae model setImgList');
yield put({
type: 'getImgList',
payload,
});
},
},
reducers: {
allInfo(state, action) {
return {
...state,
list: action.payload,
};
},
getImgList(state, action) {
return {
...state,
imgList: action.payload,
};
},
},
};
大功告成。
本文感謝 ld 同學的支援。
最後一段
有人說，前端開發，連賣菜的都會。可如果真的遇到技術難題，還是得找個靠譜的前端同學才行。這不，來看看前端碼農日常：
