根據項目需求,可能要上傳多張照片,所以我選擇了 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
});
}
}
}
最終效果