根据项目需求,可能要上传多张照片,所以我选择了 ant Upload 组件中 照片墙 部分 的代码块。
这里用到了上传成功后的预览、删除
只要用到的方法
onChange 上传中、完成、失败都会调用这个函数。
onPreview 预览
斜体样式在项目中我遇到的问题是以上在上传中,点击确定,图片才显示;
斜体样式说明图片我上传成功了,我只是没有对图片上传成功后做处理;
所以这里我用了 status === ‘done’ 来做判断,loading 改变
//转base64`
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
//上传之前 只限图片
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
if (!isJpgOrPng) {
message.error('你只能上传 JPG/PNG/GIF 的文件!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
constructor(props) {
super(props);
this.state = {
previewVisible: false,
previewImage: '', //预览
fileList: [], //上传文件列表
baseimg: '',
loading: false, //上传 loading
}
}
render() {
const { handlePreview, previewVisible, previewImage, fileList,
handleChange, handleCancelPic, },
} = this.props;
//上传按钮
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<div>
<Upload
action="www.baidu.com"
listType="picture-card"
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={handleCancelPic}>
<img alt="故障图片" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
)
}
//上传 取消
handleCancelPic = () => this.setState({ previewVisible: false });
//上传 预览
handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.setState({
previewImage: file.thumbUrl || file.preview,
previewVisible: true,
});
};
//上传 onChange
/* onChange 参数 file 中有上传的状态 status
*/
handleChange = ({ file, fileList, event }) => {
if(file.type.indexOf("image") == -1){ //是否包含 image
return;
}else {
if (file.status === "uploading") {
this.setState({ loading: true });
}
if (file.status === "done") {
getBase64(file.originFileObj)
this.setState({
loading: false,
baseimg: fileList[0].thumbUrl
});
}
if (event == undefined) {
this.setState({
fileList,
});
} else {
this.setState({
fileList,
baseimg: fileList[0].thumbUrl
});
}
}
}
最终效果