【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
  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 {}