import React, { useState } from 'react';
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
interface uploadProps{
fileList:string;
}
const ImageUploader:React.FC <uploadProps> = () => {
const [fileList, setFileList] = useState([
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]);
const onChange = ({ fileList: newFileList }) => {
setFileList(newFileList);
};
const onPreview = async file => {
let src = file.url;
if (!src) {
src = await new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj);
reader.onload = () => resolve(reader.result);
});
}
const image = new Image();
image.src = src;
const imgWindow = window.open(src);
imgWindow!.document.write(image.outerHTML);
};
return (
<ImgCrop rotate>
<Upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture-card"
fileList={fileList}//this error:Type 'string' cannot be assigned to type 'UploadFileStatus | undefined'.
onChange={onChange}
onPreview={onPreview}
>
{fileList.length < 5 && '+ Upload'}
</Upload>
</ImgCrop>
);
};
export default ImageUploader
WARNING
Type '{ uid: string; name: string; status: string; url: string; }[]' cannot be assigned to type 'UploadFile<any>[]'.
Type '{ uid: string; name: string; status: string; url: string; }' cannot be assigned to type 'UploadFile<any>'.
The types of property 'status' are incompatible.
Type 'string' cannot be assigned to type 'UploadFileStatus | undefined'. ts(2322)
interface.d.ts(70, 5): Required type from property "fileList", on type "IntrinsicAttributes & UploadProps<any> & { children?: ReactNode; } & RefAttributes<any>" here