【Ant.designpro】上传图片

一、前端

fieldProps:可以监听并且获取到组件输入的内容
action={“/api/upload_image”} 直接调用后端接口

<ProFormUploadButton
  label={"上传手续图片"}
  name={"imgs"}
  action={"/api/upload_image"}
  max={5} 
  fieldProps={{
    onChange:(file)=>{
      console.log(111111111111111,file.fileList)
      const fList = []
      if(file.event){
        file.fileList.map((value, index)=>{
          fList.push(value.name)
        })
        setFileList(fList) //获取图片名和后缀
      }
    }
  }}
/>

formData就是后端需要的数据

const formData = new FormData();
formData.append('file', file);  

我们需要用到fieldProps,在他里面用beforeUpload方法
在他里面写接口传数据

<ProFormUploadButton
	# 限制图片选择
 accept={"image/jpeg,image/png"}
  label={"上传手续图片"}
  name={"imgs"}
  max={5} 
  fieldProps={{
	maxCount:5  //图片上传最大数
   	beforeUpload:async(file)=>{
     const formData = new FormData();
     formData.append('file', file);  
     const response = await upload_image(formData)
    }
 }}
/>

二、后端

# 上传文件
@server.route("/api/upload_image", methods=['post'])
def upload_image():
    file = request.files['file']
    print("file",file)
    filename = os.path.join(IMG_DIR,file.filename)
    print("filename",filename)
    file.save(filename)
    return {}

  const [formImgFiles, setFormImgFiles] = useState([]);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [delId, setDelId] = useState(null);
  const [fileList, setFileList] = useState<UploadFile[]>([]);

	const handlePreview = async (file: UploadFile) => {
	 if (!file.url && !file.preview) {
	   file.preview = await getBase64(file.originFileObj as FileType);
	 }
	
	 setPreviewImage(file.url || (file.preview as string));
	 setPreviewOpen(true);
	};
	
	const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>{
	   setFileList(newFileList);
	}


  const uploadButton = (
    <button style={{ border: 0, background: 'none',marginBottom:"2%"}} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );


<div style={{marginBottom:"2%"}}>
                            <Upload
                              accept={"image/jpeg,image/png"}
                              listType="picture-card"
                              fileList={fileList}
                              onPreview={handlePreview}
                              onChange={handleChange}
                              beforeUpload={async(file)=>{
                                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                                if (!isJpgOrPng) {
                                  message.error(`${file.name} 不是一个 JPG/PNG 文件`);
                                  return false
                                }
                                const isLt4M = file.size / 1024 / 1024 < 4;
                                if (!isLt4M) {
                                  message.error('图片上传大小超过 4MB!');
                                }
                                const formImgFiless = formImgFiles
                                formImgFiless.push(file)
                                if(formImgFiless.length===formRef.current?.getFieldValue("procedure_details").length){
                                  message.success("图片数量已达到要求");
                                }
                                setFormImgFiles(formImgFiless)
                              }}
                              onRemove={(va)=>{
                                setFormImgFiles(formImgFiles.filter(file => file.uid !== va.uid)); // 更新状态
                              }}
                            >
                              {fileList.length >= formRef.current?.getFieldValue("procedure_details").length ? null : uploadButton}
                            </Upload>
                            {previewImage && (
                              <Image
                                wrapperStyle={{ display: 'none'}}
                                preview={{
                                  visible: previewOpen,
                                  onVisibleChange: (visible) => setPreviewOpen(visible),
                                  afterOpenChange: (visible) => !visible && setPreviewImage(''),
                                }}
                                src={previewImage}
                              />
                            )}
                          </div>