在react全家桶 umi框架中,集成antd design 中的upload组件,出现一个问题:
在IOS浏览器中需要双击才能打开图片等。问题和github上的这个问题差不多:
https://github.com/ant-design/ant-design/issues/10854
具体问题的原因可以查看上面链接的最后一个回复。
直接给解决办法:
把upload下的所有组件即:
在uploadButton上全部添加className=needsclick
import cls from "classnames";
render() {
const { previewVisible, previewImage, fileList } = this.state;
const { token } = this.props;
const data = {
token: token,
};
const uploadButton = (
<div className="needsclick">
<i className={cls(`iconfont needsclick icon-jiahao1`, styles.uploadIcon)}></i>
<div className={cls(`needsclick`, styles['ant-upload-text'])}>上传图片</div>
</div>
);
return (
<div className={cls(`clearfix`, styles.uploadWrapper)}>
<Upload
ref={this.upload}
action={config.qiniu}
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
data={data}
name="file"
>
{fileList.length >= 6 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage}/>
</Modal>
</div>
);
}