本次做后臺管理系統，采用的是 AntD 框架，涉及到圖片的上傳，用的是AntD的 upload 組件，
我在上一篇文章《前端AntD框架的upload組件上傳圖片時遇到的一些坑》中講到：AntD 的 upload 組件有很多坑，引起了很多人的關注，折騰過的人，自然明白其中的苦楚，
今天這篇文章，我們繼續來研究 AntD 的 upload 組件的另一個坑，
備注：本文寫于2020-06-11，使用的 antd 版本是 3.13.6，
使用 AntD 的 upload 組件做圖片的上傳，效果演示
因為需要上傳多張圖片，所以采用的是照片墻的形式，上傳成功后的界面如下：
（1）上傳中：
（2）上傳成功：
（3）圖片預覽：
代碼實作
首先，你需要讓后臺同學提供好圖片上傳的介面，上一篇文章中，我們是把介面呼叫直接寫在了 <Upload> 標簽的 action 屬性當中，但如果你在調介面的時候，動作很復雜（比如根據業務要求，需要連續調兩個介面才能上傳圖片，或者在調介面時還要做其他的事情），這個 action 方法就無法滿足需求了，那該怎么做呢？
好在 AntD 的 upload 組件給我們提供了 customRequest這個方法：
關于customRequest 這個方法， AntD 官方并沒有給出示例，他們只是在 GitHub 上給出了這樣一個簡短的介紹：
但這個方法怎么用呢？用的時候，會遇到什么問題呢？AntD 官方沒有說，我在網上搜了半天，也沒看到比較完整的、切實可行的 Demo，我天朝地大物博，網路資料浩如煙海，AntD 可是口口聲聲被人們號稱是天朝最好用的管理后臺的樣式框架，可如今，卻面臨這樣的局面，我看著你們，滿懷羨慕，
既然如此，那我就自己研究吧，折騰了一天，總算是把 customRequest 的坑踩得差不多了，
啥也不說了，直接上代碼，
采用 AntD框架的 upload 組件的 customRequest 方法，自定義上傳行為，核心代碼如下：
import React, { PureComponent } from 'react';
import { Button, Card, Form, message, Upload, Icon, Modal, Row, Col } from 'antd';
import { connect } from 'dva';
import { queryMyData, submitData } from '../api';
import { uploadImage } from '../../utils/wq.img.upload';
import styles from '../../utils/form.less';
const FormItem = Form.Item;
@Form.create()
export default class PicturesWall extends PureComponent {
constructor(props) {
super(props);
const { id } = this.props.match.params;
this.state = {
id,
img: undefined, // 從介面拿到的圖片欄位
imgList: [], // 展示在 antd圖片組件上的資料
previewVisible: false,
previewImage: '',
};
}
componentDidMount() {
const { id } = this.state;
id && this.queryData();
}
// 調介面，查詢已有的資料
queryData() {
const { id } = this.state;
queryMyData({
id,
})
.then(({ ret, data }) => {
if (ret == 0 && data && data.list && data.list.length) {
const item = data.list[0];
const img = data.img;
const imgList = item.img
? [
{
uid: '1', // 注意，這個uid一定不能少，否則展示失敗
name: 'hehe.png',
status: 'done',
url: img,
},
]
: [];
this.setState({
img,
imgList,
});
} else {
return Promise.reject();
}
})
.catch(() => {
message.error('查詢出錯，請重試');
});
}
handleCancel = () => this.setState({ previewVisible: false });
// 方法：圖片預覽
handlePreview = (file) => {
console.log('smyhvae handlePreview:' + JSON.stringify(file));
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
};
// 參考鏈接：https://www.jianshu.com/p/f356f050b3c9
handleBeforeUpload = (file) => {
console.log('smyhvae handleBeforeUpload file:' + JSON.stringify(file));
console.log('smyhvae handleBeforeUpload file.file:' + JSON.stringify(file.file));
console.log('smyhvae handleBeforeUpload file type:' + JSON.stringify(file.type));
//限制圖片 格式、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';
const isLt2M = file.size / 1024 / 1024 < 1;
if (!(isJPG || isJPEG || isPNG)) {
Modal.error({
title: '只能上傳JPG、JPEG、PNG格式的圖片~',
});
} else if (!isLt2M) {
Modal.error({
title: '圖片超過1M限制，不允許上傳~',
});
}
return (isJPG || isJPEG || isPNG) && isLt2M;
};
// checkImageWH 回傳一個promise 檢測通過回傳resolve 失敗回傳reject阻止圖片上傳
checkImageWH(file) {
return new Promise(function (resolve, reject) {
let filereader = new FileReader();
filereader.onload = (e) => {
let src = https://www.cnblogs.com/qianguyihao/p/e.target.result;
const image = new Image();
image.onload = function () {
// 獲取圖片的寬高
file.width = this.width;
file.height = this.height;
resolve();
};
image.onerror = reject;
image.src = src;
};
filereader.readAsDataURL(file);
});
}
// 圖片上傳
doImgUpload = (options) => {
const { onSuccess, one rror, file, onProgress } = options;
// start：進度條相關
// 偽裝成 handleChange里面的圖片上傳狀態
const imgItem = {
uid:'1', // 注意，這個uid一定不能少，否則上傳失敗
name: 'hehe.png',
status: 'uploading',
url: '',
percent: 99, // 注意不要寫100，100表示上傳完成
};
this.setState({
imgList: [imgItem],
}); // 更新 imgList
// end：進度條相關
const reader = new FileReader();
reader.readAsDataURL(file); // 讀取圖片檔案
reader.onload = (file) => {
const params = {
myBase64: file.target.result, // 把 本地圖片的base64編碼傳給后臺，調介面，生成圖片的url
};
// 上傳圖片的base64編碼，調介面后，回傳 imageId
uploadImage(params)
.then((res) => {
console.log('smyhvae doImgUpload:' + JSON.stringify(res));
console.log('smyhvae 圖片上傳成功：' + res.imageUrl);
const imgItem = {
uid: '1', // 注意，這個uid一定不能少，否則上傳失敗
name: 'hehe.png',
status: 'done',
url: res.imageUrl, // url 是展示在頁面上的絕對鏈接
imgUrl: res.imageUrl, // imgUrl 是存到 db 里的相對鏈接
// response: '{"status": "success"}',
};
this.setState({
imgList: [imgItem],
}); // 更新 imgList
})
.catch((e) => {
console.log('smyhvae 圖片上傳失敗:' + JSON.stringify(e || ''));
message.error('圖片上傳失敗，請重試');
});
};
};
handleChange = ({ file, fileList }) => {
console.log('smyhvae handleChange file:' + JSON.stringify(file));
console.log('smyhvae handleChange fileList:' + JSON.stringify(fileList));
if (file.status == 'removed') {
this.setState({
imgList: [],
});
}
};
submit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
const { id, imgList } = this.state;
const tempImgList = imgList.filter((item) => item.status == 'done'); // 篩選出 status = done 的圖片
const imgArr = [];
tempImgList.forEach((item) => {
imgArr.push(item.imgUrl);
// imgArr.push(item.url);
});
submitData({
id,
img: imgArr[0] || '', // 1、暫時只傳一張圖片給后臺，如果傳多張圖片，那么，upload組件需要進一步完善，比較麻煩，以后有需求再優化，2、如果圖片欄位是選填，那就用空字串兜底
})
.then((res) => {
if (res.ret == 0) {
message.success(`${id ? '修改' : '新增'}成功，自動跳轉中...`);
} else if (res.ret == 201 || res.ret == 202 || res.ret == 203 || res.ret == 6) {
return Promise.reject(res.msg);
} else {
return Promise.reject();
}
})
.catch((e) => {
message.error(e || '提交失敗，請重試');
});
});
};
render() {
const { id, imgList } = this.state;
console.log('smyhvae render imgList:' + JSON.stringify(imgList));
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 3 },
wrapperCol: { span: 10 },
};
const buttonItemLayout = {
wrapperCol: { span: 10, offset: 3 },
};
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<Card title={id ? '修改資訊' : '新增資訊'}>
<Form onSubmit={this.submit} layout="horizontal">
{/* 新建圖片、編輯圖片 */}
<FormItem label="圖片" {...formItemLayout}>
{getFieldDecorator('img', {
rules: [{ required: false, message: '請上傳圖片' }],
})(
<Upload
action="2"
customRequest={this.doImgUpload}
listType="picture-card"
fileList={imgList}
onPreview={this.handlePreview}
beforeUpload={this.handleBeforeUpload}
onChange={this.handleChange}
>
{imgList.length >= 1 ? null : uploadButton}
</Upload>
)}
</FormItem>
<Row>
<Col span={3} />
<Col span={18} className={styles.graytext}>
注：圖片支持JPG、JPEG、PNG格式，小于1M，最多上傳1張
</Col>
</Row>
<FormItem {...buttonItemLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</FormItem>
</Form>
{/* 圖片點開預覽 */}
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src=https://www.cnblogs.com/qianguyihao/p/{this.state.previewImage} />
);
}
}
參考鏈接
注意file的格式：https://www.lmonkey.com/t/oREQA5XE1
Demo在線演示：
-
https://stackoverflow.com/questions/58128062/using-customrequest-in-ant-design-file-upload
-
https://stackblitz.com/edit/so-58128062-upload-progress
fileList 格式在線演示：
-
https://stackoverflow.com/questions/51514757/action-function-is-required-with-antd-upload-control-but-i-dont-need-it
-
https://codesandbox.io/s/rl7ooo544q
ant design Upload組件的使用總結：https://www.jianshu.com/p/0aa4612af987
antd上傳功能的CustomRequest：https://mlog.club/article/3832743
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69811.html
標籤：JavaScript